web-dev-qa-db-fra.com

NEXTJS Comment mapper plusieurs itinéraires à une page?

J'ai une page appelée blog dans ma nextjs version 9.

Next Créer un itinéraire / blog pour ma page. Maintenant, je veux que ces itinéraires soient mappés sur la même page de blog et, par conséquent, le composant de blog:

1. /blog/cat1/gold
2. /blog/cat2/silver
3. /blog/cat3/bronze

En fait, je veux les utiliser comme query parameters Dans la route mais je ne veux pas suivre ce format:

1. /blog?cat=cat1&color=gold
2. /blog?cat=cat2&color=silver
3. /blog?cat=cat3&color=bronze

J'ai utilisé next/router _ asPath _ mais c'est complètement côté client et en rechargez-le, le retour 404!

Dans nextjs 9 Routage dynamique a fourni ce qui peut m'aider mais que la chose est que je veux avoir un seul composant et des itinéraires différents.

Avez-vous des idées?

reactjsroutingreact-routernext.jsquery-parameters
11
Afsanefda

Vous n'avez pas spécifié votre serveur Web, donc je vais donner un exemple en utilisant ExpressJS.

const app = next({ dev })

app.prepare().then(() => {
   const server = express();
   server.get("/blog/:cat/:color", (req, res) => app.render(req, res, `/blog`));
})

Si vous avez besoin d'accéder à la valeur de la page, vous pouvez utiliser getInitialProps _ pour obtenir la valeur en accédant à req.params.cat et req.params.color.

Une autre manière consiste à transmettre la valeur directement lorsque vous appelez app.render une fonction:

app.render(req, res, '/posts', { cat: req.params.cat, color: req.params.color })

Voici le exemple .

3
Darryl RN