如何将状态从一个反应路线传递到另一个反应路线？答案

【问题标题】：How can i pass a state from one react route to another react route?如何将状态从一个反应路线传递到另一个反应路线？
【发布时间】：2021-07-27 23:54:51
【问题描述】：

我正在构建一个具有多条路线的应用程序，因此您可以猜到我需要在不同路线之间传输数据，我正在使用react-router-dom 在这些路线之间导航/重定向，使用useHistory.push("/route")我的一条路线可以通过我的另一条路线访问，因为它们位于不同的模块中，如下所示

<Switch>
            <Route exact path = "/">
                <Home/>
            </Route>
            <Route exact path = "/login">
                <Login/>
            </Route>    
            <Route exact path = "/signup">
                <Signup/>
            </Route>
        </Switch>
    </Router>

谁能告诉我如何将一些状态从 /login 发送到 /home 等任何帮助表示赞赏..

【问题讨论】：

就像你在 React 中做的一样，"lifting state up" 到你的顶级组件。您的子组件是 Routes 的事实根本不会改变这一点。如果样板太多，你可以考虑使用 React Context，或者像 Redux 这样的状态管理库。
我实际上从未在路由更改时尝试过这个lifting up，只是我害怕页面刷新。当然，如果您没有看到硬刷新，这不是一个坏方法，尤其是在应用 Context 的情况下。

标签： javascript reactjs module react-redux react-router-dom

【解决方案1】：

这是一个有趣的问题，有办法。

网址状态

import { useHistory } from 'react-router-dom'
 
const Component = () => {
  const history = useHistory()
  ...
  history.push('/bulletin', { type: 'success' });
}

此type 将显示在该路线下

import { useLocation } from 'react-router-dom'

const Component = () => {
  const location = useLocation()
  const { type } = location.state

本地存储

将其保存在浏览器内的本地存储中的某个位置，然后下一条路线将其拾取。

服务器存储

调用一个 api 来保存该信息，因此下一条路由将通过另一个 api 调用来获取它。

耦合方式

以上都是解耦方式，应该是可扩展的。有时您可以将两条路由物理连接在一起，例如。只需在第一个组件中再次重用第二个组件即可。

【讨论】：

这让事情变得更容易了，我认为会有很多麻烦??