1. kpppn

    Posted

    kpppn
Changes in title
+nextjsのルーティングまとめ
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,105 @@
+# はじめに
+nextjsの[routing](https://github.com/zeit/next.js/#routing)のREADMEに書いてあることをベースに遷移先のgetInitialPropsで取得できる内容をまとめてます
+
+遷移後のページでは以下のコードでpath情報周りを取得してます
+
+```jsx
+import React from 'react';
+
+export default class extends React.Component {
+ static async getInitialProps({ pathname, query, asPath }) {
+ return { pathname, query, asPath };
+ }
+
+ render() {
+ return (
+ <ul>
+ <li>pathname: {this.props.pathname}</li>
+ <li>query: {JSON.stringify(this.props.query)}</li>
+ <li>asPath: {this.props.asPath}</li>
+ </ul>
+ );
+ }
+}
+```
+
+## ベーシックなやつ
+
+`<Link>`にhrefに遷移先のurlを指定します
+
+```jsx:index.jsx
+import React from 'react';
+import Link from 'next/link';
+
+export default () => (
+ <Link href='/general'>
+ <a>general</a>
+ </Link>
+);
+```
+```
+pathname: /general
+query: {}
+asPath: /general
+```
+しっかりとpathの情報が取得できてます
+いまはpathnameとasPathは一緒ですが、この後で違いが出てきます
+
+## クエリパラメーター付き
+見たまんまですが、`pathname`にpathを`query`にオブジェクトを渡します
+以下が生成後のpath
+`/withQuery?hoge=fuga`
+
+```jsx:index.jsx
+import React from 'react';
+import Link from 'next/link';
+
+export default () => (
+ <Link href={{ pathname: '/withQuery', query: { hoge: 'fuga' } }}>
+ <a>withQuery</a>
+ </Link>
+);
+```
+```
+pathname: /withQuery
+query: {"hoge":"fuga"}
+asPath: /withQuery?hoge=fuga
+```
+queryでしっかりと取得できてます
+pathnameとasPathの違いはクエリパラメーターが付いてるかどうかでした
+
+## ファイル名そのまま、pathを変えたい場合
+
+nextjsは`pages/`配下のファイル名を元にルーティングしてくれますが、urlで表示されるpathは別名がいいときは`as`を使います
+
+以下のやつのurlのpathは`/dummy`になります
+
+```jsx:index.jsx
+import React from 'react';
+import Link from 'next/link';
+
+export default () => (
+ <Link href='/general' as='dummy'>
+ <a>general</a>
+ </Link>
+);
+```
+```
+pathname: /general
+query: {}
+asPath: /dummy
+```
+
+`pathname`に`href`に指定したもの、`asPath`に`as`に指定したものが取得できます
+
+# おわりに
+※追記していくと思います
+
+
+
+
+
+
+
+
+