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

Question

我正在构建一个具有多条路由的应用程序，因此您可以猜测我需要在不同的路由之间传输数据，我正在使用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等发送一些状态吗任何帮助都将不胜感激。。

Answer 1

这是一个有趣的问题，有很多方法。

Url状态

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调用来获取它。

耦合方式

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