Question

我正在使用next.js重建用于服务器端渲染的应用程序。我有一个用于处理搜索请求的按钮。

在旧版应用中，处理程序是这样的：

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

在结果类中，我可以使用this.props.location.state.pattern获取状态日期。

所以现在我正在使用next.js：

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

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

在结果类中，我使用

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

我不确定是否必须将其添加到server.js：

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

但是，由于req未定义，函数getInitialProps会引发错误。长文本，简短问题：如何在不使用GET参数的情况下将状态或参数传递给另一个页面？

Answer 1

在next.js中，您可以传递这样的查询参数

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

并在您的下一页（此处为/about页中稀薄）中检索它们

this.props.router.query.name

Answer 2

如果您想要“干净”的URL，一种解决方法是将onClick处理程序添加到链接中，并将所需的信息存储在context / redux存储中。如果您已经拥有一个，则很容易实现。

<Link href='...'>
  <a onClick={()=>{dispatch(....)}}>Link<a/>
<Link>

Next.js：带有状态的Router.push

2 个答案: