我正在使用next.js来重建一个应用程序以进行服务器端渲染。我有一个按钮来处理搜索请求。
在旧的应用程序中,处理程序是这样的:
search = (event) => {
event.preventDefault();
history.push({
pathname: '/results',
state: {
pattern: this.state.searchText,
}
});
}
在results类中,我可以通过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)
})
但是,函数getInitialProps抛出错误,因为req未定义。长文本,短问题:如何在不使用GET参数的情况下将状态或参数传递给另一个页面?
5条答案
按热度按时间4dbbbstv1#
在
next.js
中,可以像这样传递查询参数然后在下一页(这里是
/about
页),通过router
props检索query
,需要使用withRouter
将其注入到Component
。m0rkklqb2#
如果你想你的网址保持干净,做一个小的除了Prithwee达斯的答案如下。
现在您可以使用props访问组件中的props
iyfamqjs3#
我不知道这是否支持SSR,但我不得不按照以下方法来避免错误
cannot read property 'query' of undefined
。这使用
useRouter
钩子来访问url,如下所示导入。假设您希望将数据
{name:'Someone'}
从Component A
传递到Component B
。在
Component A
中,在
Component B
中,pinkon5k4#
如果你想要“干净”的URL,一种方法是在你的链接中添加onClick处理程序,并将所需的信息存储在context/redux store中。如果你已经有了一个,它很容易实现。
k10s72fa5#
我想添加@Ahmet Firat Keler的答案。如果你想让你的URL保持干净并传递数据,我们可以使用
"next/link"
。as
props在next/link
中工作正常,你也可以在next/link
中隐藏查询参数。但请记住,如果您将
target="_blank"
设置为锚标记或打开指向浏览器下一个标签的链接,则这将不起作用