问题描述
我正在使用 next.js 为服务器端渲染重建应用程序.我有一个处理搜索请求的按钮.
I'm using next.js for rebuilding an app for server side rendering.I have a button that handles a search request.
在旧的应用程序中,处理程序是这样的:
In the old app, the handler was this one:
search = (event) => {
event.preventDefault();
history.push({
pathname: '/results',
state: {
pattern: this.state.searchText,
}
});
}
在结果类中,我可以使用 this.props.location.state.pattern 获取状态日期.
In the results class, I could get the state date with this.props.location.state.pattern.
所以现在我使用 next.js:
So now I'm using 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 中:
I'm not sure if I have to add this to my server.js:
server.get('/results', (req, res) => {
return app.render(req, res, '/results', req.params)
})
但是,函数 getInitialProps 会抛出错误,因为 req 未定义.长文本,短问题:如何在不使用 GET 参数的情况下将状态或参数传递给另一个页面?
However, the function getInitialProps throws an error because req is undefined. Long text, short question: how to pass state or params to another page without using GET parameters?
推荐答案
在 next.js
中你可以像这样传递查询参数
In next.js
you can pass query parameters like this
Router.push({
pathname: '/about',
query: { name: 'Someone' }
})
然后在你的下一个页面(这里在 /about
页面),通过 router
道具检索query
,这需要使用withRouter
注入Component
.
and then in your next page (here in /about
page), retrieve the query
via the router
props, which needs to be injected to Component
by using withRouter
.
import { withRouter } from 'next/router'
class About extends React.Component {
// your Component implementation
// retrieve them like this
// this.props.router.query.name
}
export default withRouter(About)
这篇关于Next.js:带状态的 Router.push的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!