javascript Next.js：Router.push with state

lh80um4z 于 2023-04-04 发布在 Java

关注(0)|答案(5)|浏览(125)

我正在使用next.js来重建一个应用程序以进行服务器端渲染。我有一个按钮来处理搜索请求。
在旧的应用程序中，处理程序是这样的：

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

在results类中，我可以通过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参数的情况下将状态或参数传递给另一个页面？

JavaScript

来源：https://stackoverflow.com/questions/55182529/next-js-router-push-with-state

5条答案

按热度按时间

4dbbbstv1#

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

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

然后在下一页（这里是/about页），通过router props检索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)

赞(0）回复(0）举报 2023-04-04

m0rkklqb2#

如果你想你的网址保持干净，做一个小的除了Prithwee达斯的答案如下。

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>
    );
};

...

赞(0）回复(0）举报 2023-04-04

iyfamqjs3#

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

赞(0）回复(0）举报 2023-04-04

pinkon5k4#

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

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

赞(0）回复(0）举报 2023-04-04

k10s72fa5#

我想添加@Ahmet Firat Keler的答案。如果你想让你的URL保持干净并传递数据，我们可以使用"next/link"。
as props在next/link中工作正常，你也可以在next/link中隐藏查询参数。

<Link href={`/blogs/${item.slug}?id=${item.id}`} as={`/blogs/${item.slug}`} passHref>
    <a href="" className="hover:text-cyanBlue">
        Read More
    </a>
</Link>

但请记住，如果您将target="_blank"设置为锚标记或打开指向浏览器下一个标签的链接，则这将不起作用

赞(0）回复(0）举报 2023-04-04

我来回答

javascript Next.js：Router.push with state

5条答案

相关问题

热门标签

最新问答