web-dev-qa-db-ja.com

Next.jsのURLから（クエリ文字列）パラメータを取得する方法は？

/index.jsのリンクをクリックすると、/about.jsページに移動します。ただし、URLを介してパラメーター名（/ about？name = leangchheanなど）を/index.jsから/about.jsに渡すと、それを取得する方法がわかりません/about.jsページ。

index.js

import Link from 'next/link'
export default () => (    
<div>Click <Link href={{ pathname: 'about', query: { name: 'leangchhean' }}}><a>here</a></Link> to read more</div>
)
next.js
18
Sour LeangChhean

  • About.jsページの以下のコードを使用して取得します。

    enter image description here

// pages/about.js
import Link from 'next/link'
export default ({ url: { query: { name } } }) => (
  <p>Welcome to About! { name }</p>
)
12
Sour LeangChhean

url propはNext.jsバージョン6として非推奨です： https://github.com/zeit/next.js/blob/master/errors/url-deprecated.md

クエリパラメータを取得するには、getInitialPropsを使用します。

ステートレスコンポーネントの場合

import Link from 'next/link'
const About = ({query}) => (    
  <div>Click <Link href={{ pathname: 'about', query: { name: 'leangchhean' }}}><a>here</a></Link> to read more</div>
)

About.getInitialProps = ({query}) => {
  return {query}
}

export default About;

通常のコンポーネント用

class About extends React.Component {

  static getInitialProps({query}) {
    return {query}
  }

  render() {
    console.log(this.props.query) // The query is available in the props object
    return <div>Click <Link href={{ pathname: 'about', query: { name: 'leangchhean' }}}><a>here</a></Link> to read more</div>

  }
}

クエリオブジェクトは次のようになります：url.com?a=1&b=2&c=3になります：{a:1, b:2, c:3}

10
Brunno Vodola Martins

ルーターフックの使用はどうですか？

アプリの任意のコンポーネントでuseRouter hookを使用できます。

https://github.com/zeit/next.js/#userouter

パラメータを渡す

import Link from "next/link";

<Link href={{ pathname: '/search', query: { keyword: 'this way' } }}><a>path</a></Link>

import Router from 'next/router'

Router.Push({
    pathname: '/search',
    query: { keyword: 'this way' },
})

コンポーネント内

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()
  console.log(router.query);

  ...
}
3
Juneho Nam

static exportsで動作するソリューションをお探しの場合は、ここにリストされているソリューションを試してください： https://github.com/zeit/next .js/issues/4804＃issuecomment-4607544

簡単に言うと、router.queryはSSRアプリでのみ機能しますが、router.asPathは引き続き機能します。

したがって、exportPathMap（動的ではない）を使用して、next.config.jsでクエリの事前エクスポートを構成できます。

    return {
      '/': { page: '/' },
      '/about': { page: '/about', query: { title: 'about-us' } }
    }
  }

または、router.asPathを使用し、 query-string のようなライブラリを使用して自分でクエリを解析します。

import { withRouter } from "next/router";
import queryString from "query-string";

export const withPageRouter = Component => {
  return withRouter(({ router, ...props }) => {
    router.query = queryString.parse(router.asPath.split(/\?/)[1]);

    return <Component {...props} router={router} />;
  });
};
3
DILP