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

Question

我正在构建一个包含多个路由的应用程序，因此您可以猜到我需要在不同路由之间传输数据，我在这些路由之间使用 react-router-dom 到 navigate/redirect 使用 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 调用来获取它。

耦合方式

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

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

How can i pass a state from one react route to another react route?

javascript

module

reactjs

react-redux

react-router-dom

Url 状态

本地存储

服务器存储

耦合方式