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

Posted 2023-02-22

【中文标题】如何将状态从一个反应路线传递到另一个反应路线？

【英文标题】：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 的情况下。

【参考方案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 调用来获取它。

耦合方式

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

【讨论】：

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