Next.js：带状态的 Router.push答案

【问题标题】：Next.js: Router.push with stateNext.js：带状态的 Router.push
【发布时间】：2019-08-06 12:41:46
【问题描述】：

我正在使用 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 参数的情况下将状态或参数传递到另一个页面？

【问题讨论】：

标签： javascript reactjs react-router next.js

【解决方案1】：

在next.js你可以像这样传递查询参数

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

然后在您的下一页（此处为/about 页面）中，通过router 属性检索query，该属性需要使用withRouter 注入到Component。

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 显示 -- 类型错误 -- 无法读取未定义的属性“查询”
@ggnoredo 我猜你在getInitialProps 中使用req.user 但是当在客户端完成路由时没有req 对象。 req.user 仅在 Next.js 在服务端渲染时存在。
这会污染 UR。不是有 react router 之类的功能吗？
没有这个功能。你可以在这里找到更多关于这个github.com/zeit/next.js/issues/771@UmakantPatil
@ZenVentzi 我找不到这样的功能，不知道一个包是否模拟了那个。通常我使用本地存储来保存对象，并在需要时检索它们。只要确保我经常打扫东西而不是吃掉所有的空间。我希望将来的版本在客户端完成页面切换时放置状态。

【解决方案2】：

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

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

【讨论】：

你不想在 Redux 中放入太多东西。如果只有一两个组件对该状态感兴趣，最好避免使用 Redux 或使用上下文
是的，它基本上是一个 hack。但是因为使用 Next.js 路由器发送深层嵌套数据很难/不可能，所以它有一些有限的用途

【解决方案3】：

使用最新版本的 NextJS，我们有 hooks，在我们的例子中是 useRouter

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  )
}

export default ActiveLink

如果您想要一个动态根，只需将其放入字符串参数中即可：

<button type="button" onClick={() => router.push('/post/abc')}>
  Click me
</button>

【讨论】：

这有什么帮助？这不是传递状态，这只是使用钩子导航到 URL