Как получить (строку запроса) параметры из URL в Next.js?

Когда я нажимаю на ссылку в моем /index.js, я /about.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>
)

Ответ 1

Получите его, используя приведенный ниже код на странице about.js:

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

Ответ 2

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}

Ответ 3

Для тех, кто ищет решение, которое работает со статическим экспортом, попробуйте решение, указанное здесь: https://github.com/zeit/next.js/issues/4804#issuecomment-460754433

router.query, router.query работает только с приложениями SSR, но router.asPath прежнему работает.

Поэтому можно настроить предварительный экспорт запроса в next.config.js с помощью exportPathMap (не динамически):

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

Или используйте router.asPath и проанализируйте запрос с помощью библиотеки, подобной строке запроса:

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} />;
  });
};

Ответ 4

Как насчет использования router-hook?

вы можете использовать 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);

  ...
}

Ответ 5

Next.js уже предоставил примеры, посмотрите

https://github.com/zeit/next.js/tree/master/examples/with-next-routes