web-dev-qa-db-fra.com

Comment obtenir les paramètres de requête à partir de l'URL dans getInitialProps?

J'ai une URL propre qui contient des paramètres de requête comme celui-ci.

http: // localhost: 3000/post /: id

J'essaie de capturer le paramètre de requête "id" du côté client comme ceci.

static async getInitialProps({req, query: { id }}) {
    return {
        postId: id
    }
}

render() {
  const props = { 
       data: {
          'id': this.props.postId        // this query param is undefined
       }
  }
  return (
     <Custom {...props}>A component</Custom>
  )
}

Mon point de terminaison express ressemble à ceci.

app.post(
    '/post/:id',
    (req, res, next) => {
        let data = req.body;
        console.log(data);
        res.send('Ok');
    }
);

Mais la sortie de ma console côté serveur finit comme ça.

{ id: 'undefined' }

J'ai lu les documents et les problèmes de github, mais je n'arrive pas à comprendre pourquoi cela se produit.

javascriptexpressnextjs
6
cocoPuffs

Votre code frontal est correct, la récupération de l'ID de message à partir de la chaîne de requête est la voie à suivre.

Cependant, votre code backend est incorrect, vous devez d'abord utiliser une route GET pour rendre une page Next.js, et vous devez extraire les paramètres de chemin pour créer les paramètres de requête finale sous la forme d'une combinaison à la fois des paramètres de requête standard et de ce chemin params, cela pourrait ressembler à ceci en utilisant express:

const app = next({ dev: process.env.NODE_ENV === 'development' });
app.prepare().then(() => {
  const server = express();
  server.get('/post/:id', (req, res) => {
    const queryParams =  Object.assign({}, req.params, req.query);
    // assuming /pages/posts is where your frontend code lives
    app.render(req, res, '/posts', queryParams);
  });
});

Vérifiez cet exemple Next.js: https://github.com/zeit/next.js/tree/canary/examples/parameterized-routing pour plus d'informations.

2
saimeunt