Next.js: Router.push mit Status

Ich verwende next.js zum Neuaufbau einer App für das serverseitige Rendering. Ich habe eine Schaltfläche, die eine Suchanfrage bearbeitet.

In der alten App war der Handler dieser:

search = (event) => {
    event.preventDefault();
    history.push({
        pathname: '/results',
        state: {
            pattern: this.state.searchText,
        }
    });
}

In der Ergebnisklasse konnte ich das Bundesstaatsdatum mit this.props.location.state.pattern abrufen.

Jetzt verwende ich next.js:

import Router, { withRouter } from 'next/router'

performSearch = (event) => {
    event.preventDefault();
    Router.push({ pathname: '/results', state: { pattern: this.state.searchText } });
};

In der Ergebnisklasse verwende ich

static async getInitialProps({req}) {
    return req.params;
}

Ich bin nicht sicher, ob ich dies zu meiner server.js hinzufügen muss:

server.get('/results', (req, res) => {
    return app.render(req, res, '/results', req.params)
})

Die Funktion getInitialProps löst jedoch einen Fehler aus, da req nicht definiert ist. Langer Text, kurze Frage: Wie übergebe ich Status oder Parameter an eine andere Seite, ohne GET-Parameter zu verwenden?

In next.js Sie können Abfrageparameter wie diesen übergeben

Router.push({
    pathname: '/about',
    query: { name: 'Someone' }
})

und dann auf Ihrer nächsten Seite (hier in /about Seite), rufen Sie die ab query über die router Requisiten, die injiziert werden müssen Component durch die Nutzung withRouter.

import { withRouter } from 'next/router'

class About extends React.Component {
  // your Component implementation
  // retrieve them like this
  // this.props.router.query.name
}

export default withRouter(About)

Wenn Sie möchten, dass Ihre URL sauber bleibt, ergänzen Sie die Antwort von Prithwee Das wie folgt.

Router.push({
    pathname: '/about',
    query: { name: 'Someone' }
}, '/about');

Jetzt können Sie über Requisiten auf Requisiten in Ihrer Komponente zugreifen

...

const YourComponent = (props) => {
    useEffect(() => {
        console.log(props.router.query.name);
    }, [props.router.query]);

    return (
        <React.Fragment>
            ...
        </React.Fragment>
    );
};

...

Ich weiß nicht, ob dies SSR unterstützt, aber ich musste es wie folgt tun, um den Fehler zu vermeiden cannot read property 'query' of undefined.

Dies nutzt useRouter Hook, um Zugriff auf die URL zu erhalten, importiert wie unten.

import { useRouter } from 'next/router'

Angenommen, Sie möchten Daten übergeben {name:'Someone'} aus Component A Zu Component B.

In Component A,

const router = useRouter();

router.push(
  { pathname: "/path_of_component_b", query: { name: "Someone" } },
  "path_of_component_b"
);

In Component B,

const router = useRouter();

useEffect(() => {
  alert(router.query.name); // Alerts 'Someone'
}, [router.query]);

Wenn Sie „saubere“ URLs wünschen, besteht eine Möglichkeit darin, den onClick-Handler zu Ihrem Link hinzuzufügen und die erforderlichen Informationen im Kontext-/Redux-Store zu speichern. Es ist einfach zu implementieren, wenn Sie bereits eines haben.

<Link href="https://stackoverflow.com/questions/55182529/...">
  <a onClick={()=>{dispatch(....)}}>Link<a/>
<Link>

Ich möchte die Antwort von @Ahmet Firat Keler hinzufügen. Wenn Sie möchten, dass Ihre URL sauber bleibt und auch die Daten weitergibt, können wir dies mit tun "next/link".

as Requisiten funktionieren gut mit next/link und Sie können Abfrageparameter mit ausblenden next/link sowie.

<Link href={`/blogs/${item.slug}?id=${item.id}`} as={`/blogs/${item.slug}`} passHref>
    <a href="" className="hover:text-cyanBlue">
        Read More
    </a>
</Link>

Beachten Sie jedoch, dass dies nicht funktioniert, wenn Sie es festlegen target="_blank" um ein Ankertag zu erstellen oder einen Link zum nächsten Tab des Browsers zu öffnen