Next.js:带状态的 Router.push

IT技术 javascript reactjs react-router next.js
2021-04-03 02:21:48

我正在使用 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)
})

但是,函数 getInitialProps 会抛出错误,因为 req 未定义。长文本,短问题:如何在不使用 GET 参数的情况下将状态或参数传递到另一个页面?

2个回答

next.js你可以通过这样的查询参数

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

然后在您的下一个页面(此处在/about页面中)中,query通过routerprops检索,需要Component使用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)
js this.props.router.query.name 它正在显示 -- 输入错误 -- 无法读取未定义的属性“查询”
2021-06-16 02:21:48
这会污染 UR。没有类似反应路由器的功能吗?
2021-06-16 02:21:48
@ZenVentzi 我找不到这样的功能,不知道包是否模拟了它。通常我使用本地存储来保存对象,并在需要时检索它们。只要确保我定期清洁东西而不是吃掉所有空间。我希望未来版本在客户端完成页面切换时放置状态。
2021-06-16 02:21:48
@ggnoredo 我的猜测是您正在使用req.usergetInitialProps但是当在客户端完成路由时,没有req对象。req.user仅当 Next.js 在服务器中呈现时存在。
2021-06-17 02:21:48
没有这样的功能。你可以在这里找到更多关于这个github.com/zeit/next.js/issues/771 @UmakantPatil
2021-06-19 02:21:48

如果您想要“干净”的 url,一种方法是将 onClick 处理程序添加到您的链接并将所需信息存储在上下文/redux 存储中。如果你已经有了,它很容易实现。

<Link href='...'>
  <a onClick={()=>{dispatch(....)}}>Link<a/>
<Link>
你不想在 Redux 中放入太多东西。如果只有一两个组件对该状态感兴趣,最好避免使用 Redux 或使用上下文
2021-05-31 02:21:48
是的,这基本上是一个黑客。但是因为使用 Next.js Router 发送深层嵌套数据是困难的/不可能的,所以它有一些有限的用途
2021-06-03 02:21:48