javascript - 使用Reactjs Router Switch进行导航时如何在网页之间传递变量

Question

我正在开发一个 Web 应用程序，它可以根据用户所做的选择加载多个场景之一。

已经实现了一个网页来加载场景，这是通过对后端进行API调用(通过flask的python)来启动的。

基于 Web 的 UI 使用 React js 编写。

目前我使用路由器切换方法来允许在几个网页之间导航。

我想要实现的是:

1. 在主页上，用户选择场景并按“加载”
2. Load 实际上调用了 renderRedirect() 函数，并触发导航到场景页面。
3. 到达“场景”页面后，系统会向后端发出 API 调用，请求创建用户在第 1 步中选择的特定场景。

我不知道如何从主页获取信息(只是一个字符串scenario_id)到场景页面。

我找到了this question/answer ，但要实现它，我必须重新设计我当前的 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

如果我理解你只想要scenario_id，我想你可以通过url参数来做到这一点

如果您在主页上选择scenario_id 1，您的网址可能类似于/场景/1

所以你可以像这样定义你的路线

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

使用此代码，您可以通过 props 将 url 的 :id 部分发送到您的组件您可以通过以下方式获取 Scenario 的值

this.props.match.params.id