web-dev-qa-db-fra.com

Comment obtenir les paramètres (chaîne de requête) de l'URL dans Next.js?

Lorsque je clique sur un lien dans mon /index.js, ça m'amène à /about.js page. Cependant, lorsque je passe le nom du paramètre via l'URL (comme / about? Name = leangchhean) à partir de /index.js à /about.js, Je ne sais pas comment l'obtenir en /about.js page.

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

  • Obtenez-le en utilisant le code ci-dessous dans la page 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 est déconseillé en tant que Next.js version 6: https://github.com/zeit/next.js/blob/master/errors/url-deprecated.md

Pour obtenir les paramètres de requête, utilisez getInitialProps:

Pour les composants sans état

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;

Pour les composants réguliers

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>

  }
}

L'objet de requête sera comme: url.com?a=1&b=2&c=3 devient: {a:1, b:2, c:3}

10
Brunno Vodola Martins

Que diriez-vous d'utiliser le routeur-crochet?

vous pouvez utiliser le useRouter hook dans n'importe quel composant de votre application.

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

passer Param

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' },
})

Dans le composant

import { useRouter } from 'next/router'

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

  ...
}
3
Juneho Nam

Pour ceux qui recherchent une solution qui fonctionne avec les exportations statiques , essayez la solution répertoriée ici: https://github.com/zeit/next .js/issues/4804 # issuecomment-4607544

En un mot, router.query fonctionne uniquement avec les applications SSR, mais router.asPath fonctionne encore.

Vous pouvez donc configurer la pré-exportation de la requête dans next.config.js avec exportPathMap (non dynamique):

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

Ou utiliser router.asPath et analysez la requête vous-même avec une bibliothèque comme 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