Static, Dynamic Routing
3603 ワード
ルート。 네트워크 계층의 가장 중요한 역할
と言えますが、パケットの転送経路を指定しており、どのパケットが出力経路を通って次のホストに転送されるかを決める最も効果的な方法とも言えますし、ソフトウェア上のポイントとも言えます.ルーティングは2種類に分けられます.
スタティツクルーティングimport { useRouter } from "next/router";
const staticRouter = () =>{
const router = useRouter();
const onClickBoardMove1=()=>{
router.push('/111101/1번로그인페이지')
}
const onClickBoardMove2=()=>{
router.push('/111101/2번로그인페이지')
}
const onClickBoardMove3=()=>{
router.push('/111101/3번로그인페이지')
}
return(
<div>
<button onClick={onClickBoardMove1}>첫번째 로그인페이지</button>
<button onClick={onClickBoardMove2}>두번째 로그인페이지</button>
<button onClick={onClickBoardMove3}>새번째 로그인페이지</button>
</div>
)
}
export default staticRouter;
上記の例の関数では、/loginページでは常に誰でもいつでもログインできます."정적 라우팅한다"
と呼ばれています.const callGraphqlApi = async() =>{
try{
const result = await callApi ({
variables : {
writer:writer,
title:title,
contents:contents
}
});
setData(result.data.createBoard.message);
router.push(`/05-08-dynamic-routed-input/${result.data.createBoard.number}`);
} catch (error){
alert(error);
}
}
router.Push(05-08-動的ルーティング-input/${ユーザがクリックした掲示板番号})
掲示板の詳細ビューでは、記事番号に応じてアドレスが変更されます.
しかしながら、この場合、投稿が多くなると、各投稿番号に基づいてページを静的にルーティングすることも、メンテナンスすることも困難になるため、동적 라우팅
を用いてこれらのルーティングを効率的に処理する必要がある.
outer.push(url, as, options)
url:UrlObject|String-参照するURL
as:UrlObject|String-ブラウザURLバーに表示されるパスのオプションアノテーション.
optionsには、次の構成オプションのオプションがあります.
スクロール:選択的ブール型、ページ上部へのスクロールを制御します.デフォルト:true
浅いgetStaticProps:getServerSidePropsまたはgetInitialiPropsを再実行せずに、現在のページのパスを更新します.
デフォルト:false
locale-オプション文字列は、新しいページの領域設定を表します.
Reference
この問題について(Static, Dynamic Routing), 我々は、より多くの情報をここで見つけました
https://velog.io/@championcom/Static-Dynamic-Routing
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
import { useRouter } from "next/router";
const staticRouter = () =>{
const router = useRouter();
const onClickBoardMove1=()=>{
router.push('/111101/1번로그인페이지')
}
const onClickBoardMove2=()=>{
router.push('/111101/2번로그인페이지')
}
const onClickBoardMove3=()=>{
router.push('/111101/3번로그인페이지')
}
return(
<div>
<button onClick={onClickBoardMove1}>첫번째 로그인페이지</button>
<button onClick={onClickBoardMove2}>두번째 로그인페이지</button>
<button onClick={onClickBoardMove3}>새번째 로그인페이지</button>
</div>
)
}
export default staticRouter;
const callGraphqlApi = async() =>{
try{
const result = await callApi ({
variables : {
writer:writer,
title:title,
contents:contents
}
});
setData(result.data.createBoard.message);
router.push(`/05-08-dynamic-routed-input/${result.data.createBoard.number}`);
} catch (error){
alert(error);
}
}
Reference
この問題について(Static, Dynamic Routing), 我々は、より多くの情報をここで見つけました https://velog.io/@championcom/Static-Dynamic-Routingテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol