web-dev-qa-db-ja.com

getInitialPropsのURLからクエリパラメータを取得するにはどうすればよいですか？

このようなクエリパラメータを含むクリーンなURLがあります。

http：// localhost：3000/post /：id

私はこのようにクライアント側でクエリパラメータ 'id'をキャプチャしようとしています。

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

私の高速エンドポイントは次のようになります。

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

しかし、サーバー側のコンソール出力は次のようになります。

{ id: 'undefined' }

私はドキュメントとgithubの問題を読みましたが、なぜこれが起こっているのか理解できません。

javascriptexpressnextjs
6
cocoPuffs

フロントエンドコードが正しいため、クエリ文字列から投稿IDを取得する方法です。

ただし、バックエンドコードが正しくないため、最初にGETルートを使用してNext.jsページをレンダリングする必要があります。また、通常のクエリパラメータとそれらのパスの両方から組み合わせとして最終クエリパラメータを作成するために、パスパラメータを抽出する必要があります。 params、これは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);
  });
});

このNext.jsの例を確認してください： https://github.com/zeit/next.js/tree/canary/examples/parameterized-routing 詳しくは情報。

2
saimeunt