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

IT技术 javascript reactjs module react-redux react-router-dom
2021-05-09 14:50:45

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

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

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

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

耦合方式

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

其它你可能感兴趣的问题
上一篇React 组件不使用大括号渲染 下一篇对 JS 和 CSS 的请求改为提供 index.html