TIL-1/14
12511 ワード
routerオブジェクトとrouting,router
このオブジェクトを使用してAページからBページに移動する場合、
参考文献:https://nextjs.org/docs/api-reference/next/router
static routing, dynamic routing
/loginページは、いつログインしてもログインページが表示されます.
このようなページに移動すると
逆に、掲示板の詳細ビューのように、記事番号によってアドレスが変更されます.
/board/1記念1番投稿詳細表示ページ
/board/2号投稿詳細表示ページ
/board/3]3番投稿詳細表示ページ
/board/4号投稿詳細表示ページ
... ...
このようにページを移動することを
apollo-client graphqlクエリーの実行
graphqlのクロムツールの使用に役立ちます.
https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm?hl=en
出版物ルーティング練習
掲載する
라우터(router)객체
は、ページ移動関連機能を有する객체
である.このオブジェクトを使用してAページからBページに移動する場合、
"B 페이지로 라우팅한다"
と呼ばれます.import Router from 'next/router'
export default function Routing() {
const handleClickPathname = () => {
const pathname = Router.pathname
alert(pathname)
}
const handleClickAsPath = () => {
const asPath = Router.asPath
alert(asPath)
}
const handleClickBack = () => {
Router.back()
}
const handleClickPush = () => {
Router.push('/')
}
const handleClickReload = () => {
Router.reload()
}
const handleClickReplace = () => {
Router.replace('/')
}
return (
<>
<button onClick={handleClickPathname}>현재 위치 주소: Router.pathname</button><br/>
<button onClick={handleClickAsPath}>현재 위치 주소: Router.asPath</button><br/>
<button onClick={handleClickBack}>뒤로가기 버튼: Router.back()</button><br/>
<button onClick={handleClickPush}>현재 페이지에서, 다른 페이지로 이동: Router.push()</button><br/>
<button onClick={handleClickReload}>새로고침: Router.reload()</button><br/>
<button onClick={handleClickReplace}>현재 페이지 삭제 후, 다른 페이지로 이동: Router.replace()</button><br/>
</>
)
}
一般的なルータオブジェクト機能.参考文献:https://nextjs.org/docs/api-reference/next/router
static routing, dynamic routing
/loginページは、いつログインしてもログインページが表示されます.
このようなページに移動すると
"정적 라우팅을 한다"
と呼ばれます.逆に、掲示板の詳細ビューのように、記事番号によってアドレスが変更されます.
/board/1記念1番投稿詳細表示ページ
/board/2号投稿詳細表示ページ
/board/3]3番投稿詳細表示ページ
/board/4号投稿詳細表示ページ
... ...
このようにページを移動することを
"동적 라우팅을 한다"
と呼ぶ.apollo-client graphqlクエリーの実行
// graphql 요청에 필요한 도구 불러오기
import { useQuery, gql } from '@apollo/client'
// graphql 코드 생성
const FETCH_PROFILE = gql`
query fetchProfile($name: String){
fetchBoard(name: $name){
title
contents
}
}
`
// graphql 코드를 실행하기 위한 query 생성과 생성된 query의 실행(자동으로 실행됩니다)
const { data } = useQuery(FETCH_PROFILE)
// 최종 결과를 HTML에 보여주기
<div>
이름: <span>{data && data.fetchProfile.name}</span>
나이: <span>{data && data.fetchProfile.age}</span>
학교: <span>{data && data.fetchProfile.school}</span>
</div>
Apolloデバッグツールgraphqlのクロムツールの使用に役立ちます.
https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm?hl=en
出版物ルーティング練習
掲載する
Reference
この問題について(TIL-1/14), 我々は、より多くの情報をここで見つけました https://velog.io/@olzlel2000/TIL-114テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol