Question

我正在开发一个Web应用程序，该应用程序可以根据用户所做的选择加载几种方案之一。

已经实现了一个网页来加载场景，该页面是通过对后端进行API调用（通过烧瓶通过python）启动的。

基于Web的UI在javascript中使用了react js。

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

我想要实现的是：

在主页上，用户选择方案并按Load
加载实际上会调用renderRedirect()函数，并触发导航到“方案”页面。
到达“方案”页面后，将对后端进行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

如果我了解您只希望使用cenario_id，我认为您可以通过url参数来实现

如果您在首页上选择censage_id 1，则您的网址可能类似于 / scenario / 1

所以您可以这样定义您的路线

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

使用此代码，您将通过props将url的：id部分发送到组件您可以使用

获取“方案”中的值

this.props.match.params.id

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

1 个答案: