Next.js: Router.push 状态

Question

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

在旧应用程序中，处理程序是这个：

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

在结果 class 中，我可以通过 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 } });
};

在结果class中，我使用

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

Answer 1

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

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

然后在你的下一页（这里是 /about 页面），通过 router 道具检索 query，需要将其注入 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)

Answer 2

如果您想要 'clean' 网址，一种方法是将 onClick 处理程序添加到您的 link 并将所需信息存储在 context/redux 商店中。如果你已经有一个，它很容易实现。

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

Answer 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>

Answer 4

如果您希望您的 url 保持干净，请像下面这样对 Prithwee Das 的回答做一点补充。

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

现在您可以使用 props 访问组件中的 props

...

const YourComponent = (props) => {
    useEffect(() => {
        console.log(props.router.query.name);
    }, [props.router.query]);

    return (
        <React.Fragment>
            ...
        </React.Fragment>
    );
};

...

Answer 5

我不知道这个是否支持SSR，但是为了避免错误cannot read property 'query' of undefined.

，我不得不按如下方式操作

这使用 useRouter 挂钩访问 url，如下导入。

import { useRouter } from 'next/router'

假设您要将数据 {name:'Someone'} 从 Component A 传递到 Component B。

在Component A,

const router = useRouter();

router.push(
  { pathname: "/path_of_component_b", query: { name: "Someone" } },
  "path_of_component_b"
);

在Component B,

const router = useRouter();

useEffect(() => {
  alert(router.query.name); // Alerts 'Someone'
}, [router.query]);

Next.js: Router.push 状态

Next.js: Router.push with state

javascript

reactjs

react-router

next.js