Next.jsのページ遷移【Link,router push】

皆さんこんにちは！

今回は依然開発を担当していたReact.js,Next.jsでの

ページ遷移をまとめました。

メインブログを移行しましたので

この記事と全く同じものです。

参考 next.jsでのページ遷移asa-prog.com

react-router

reactでは主にreact-routerを使います。

Link

react-routerのLinkを使ったやり方です。
<a>に似ています。

<Link to="/info">click</Link>

withRouter(コンポーネント内)

コンポーネント内のイベントハンドラ内でのページ遷移に使われます。

Example.component extends React.Component {
onclick(){this.props.router.push('/')}

ボタンへの実装とwithRouter

render(){
return (
<div>
<button onClick={this.onClick.bind(this)}>link</button>
</div>
)}
export default
withRouter(ExampleComponent)

Route(コンポーネント外)

主にReduxのactionなどをコンポーネント外で扱うときに使います。

import {Router,Route,browserHistory } from 'react-router';
//(省略)
return(
<Router history={browserhistory}>
<Route .../>
<Route .../>
</Router>
);

Example(()=>{browserhistory.push('/Example')})

Nextjsの使用

私が使っているのはこのページ遷移です。
代表的なものをあげておきます。

Link(nextjs)

hrefにパス、asはwebページを見たときにurlに表示されるもの。
(なしだと入力したhrefがそのまま見える)

子が関数コンポーネントの時

passHrefの使用

<Link href='/example' passHref>

URLオブジェクトの時

hrefに書きます。

<Link href={{pathname: '/example', query:{name: 'test'}}}>
<a>click</a>
</Link>

router.push

router.pushもパスを指定しLinkのような使い方ができる。
が使えない処理(イベントハンドラ)などで使う。

  const signInHandler = () => {
//省略
      if (response.body != undefined) {
        setIsSignedIn(true);
        router.push('/mypage');
      } else {
      //  setMessage エラー処理省略
      }
    });
  };

気づき

src/pages/フォルダ名/index.tsx

この場合フォルダ名がパスとして設定される。
これはnextjsが自動的に認識してくれる。
そのページ配下のものはそのpagesフォルダの中に記述。

繰り返し処理のmap関数にはkeyが必須。

idなどでも可能。
keyがないとunique key errorが出る。

  const [ids] = useState(['1', '2', '3', '4', '5', '6']);
  return (
    <div>
      {ids.map((id) => {
        return (
          <div>
            <Link href={`/scrollData#${id}`}>
              <a>{id}にJUMP</a>
            </Link>
          </div>
        );
      })}

まとめ

かなり抽象的な説明でしたが以上です。
ページ遷移機能を実際に書いてみた記事も作ったので
こちらと一緒に見ていただければ
もっと理解できると思います。

実際にコードを打つと
理解が深まるのでみなさんも
トライしてみてください。