web-dev-qa-db-de.com

Wie erhalte ich (Abfragezeichenfolge) Parameter von der URL in Next.js?

Wenn ich auf einen Link in meinem /index.js Klicke, gehe ich zur Seite /about.js. Wenn ich jedoch den Parameternamen über die URL (wie / about? Name = leangchhean) von /index.js An /about.js Übergebe, weiß ich nicht, wie ich darauf zugreifen soll es in /about.js Seite.

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>
)
18
  • Verwenden Sie den folgenden Code auf der Seite "about.js", um es abzurufen:

    enter image description here

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

url prop ist veraltet als Next.js Version 6: https://github.com/zeit/next.js/blob/master/errors/url-deprecated.md

Verwenden Sie getInitialProps, um die Abfrageparameter abzurufen:

Für staatenlose Komponenten

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;

Für regelmäßige Komponenten

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>

  }
}

Das Abfrageobjekt sieht wie folgt aus: url.com?a=1&b=2&c=3 wird: {a:1, b:2, c:3}

10

Wie wäre es mit Router-Hook?

du kannst den ... benutzen useRouter hook in einer beliebigen Komponente Ihrer App.

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

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

In Komponente

import { useRouter } from 'next/router'

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

  ...
}
3
Juneho Nam

Wenn Sie nach einer Lösung suchen, die mit statischen Exporten funktioniert , versuchen Sie die hier aufgeführte Lösung: https://github.com/zeit/next .js/issues/4804 # issuecomment-4607544

Kurz gesagt, router.query Funktioniert nur mit SSR-Apps, aber router.asPath Funktioniert immer noch.

So kann entweder der Abfrage-Pre-Export in next.config.js Mit exportPathMap (nicht dynamisch) konfiguriert werden:

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

Oder verwenden Sie router.asPath Und analysieren Sie die Abfrage selbst mit einer Bibliothek wie Abfragezeichenfolge :

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