如何將 state 從一條反應路線傳遞到另一條反應路線？

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 state

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 調用來獲取它。

耦合方式

以上都是解耦方式，應該是可擴展的。 有時您可以將兩條路由物理連接在一起，例如。 只需在第一個組件中再次重用第二個組件即可。