Next.js：带有状态的Router.push

Question

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

Answer 1

如果您希望您的网址保持干净，请对 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 2

我不知道这是否支持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]);

Answer 3

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

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

然后在你的下一个页面（在此/about页），检索query通过router道具，需要被注入到Component使用withRouter。

import { withRouter } from 'next/router'

class Profile extends React.Component {
  // your Component implementation
  // retrieve them like this
  // this.props.router.query.name
}

export default withRouter(About)

Answer 4

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

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