使用Reactjs Router Switch導航時如何在網頁之間傳遞變量

Question

我正在開發一個Web應用程序，該應用程序可以根據用戶的選擇加載幾種方案之一。

已經實現了一個網頁來加載場景，這是通過對后端（通過燒瓶通過python）進行API調用來啟動的。

基於Web的UI在JavaScript中使用了react js。

目前，我使用路由器切換方法來允許在幾個網頁之間導航。

我想要實現的是：

1. 在主頁上，用戶選擇方案並按“加載”
2. 實際上，加載會調用renderRedirect()函數，並觸發導航到“方案”頁面。
3. 到達“方案”頁面后，將對后端進行API調用，以請求創建用戶在步驟1中選擇的特定方案。

我不知道如何從主頁到“方案”頁面獲取信息（只是一個字符串scenario_id ）。

我找到了這個問題/答案 ，但是要實施該問題/答案 ，我必須重新設計當前的Switch設置，以改為使用router.push ，除非我弄錯了？

這是我當前的路由代碼：

render((
    <BrowserRouter>
        <Switch>
            <Route exact path='/new-scenario' component={NewScenario}/>
            <Route exact path='/about' component={About}/>
            <Route exact path='/' component={Home}/>
        </Switch>
    </BrowserRouter>
), document.getElementById('root'));

Answer 1

如果我了解您只需要cenario_id，我認為您可以通過url參數來實現

如果您在首頁上選擇censage_id 1，則您的網址可能類似於/ scenario / 1

所以你可以這樣定義你的路線

       <Route exact path="/scenario/:id" render={props => <ScenarioComponent {...props} /> } />

使用此代碼，您將通過prop將url的：id部分發送到組件，您可以使用以下方法獲取Scenario上的值

this.props.match.params.id