javascript - React-router-dom:在一条路由下渲染两个组件

Question

<Provider store={store}>
    <BrowserRouter>
        <div>
            <Switch>
              <Route
                path="/test/:id"
                component={Question1} />
              <Route
                path="/test/:id"
                component={Question2} />
        </div>
    </BrowserRouter>
</Provider>

我需要从 ID 为 1 的 Question1 导航到 ID 为 2 的 Question2。我可以毫无问题地从测试导航到 Question1，但是当我想转到问题时，请使用 this. props.history.push('/test/2') URL 更改，但我没有导航到问题2。

有什么想法吗？

Answer 1

您应该有一个Question组件来处理id并显示适当的问题。

您可以使用 Route 的 render 方法执行相同的操作

  <Route
     path="/test/:id"
     render={(props)=>{
             switch(props.match.params.id){
                  case "1": return <Question1/>;
                  case "2" : return <Question2/>;
                  default : return null;
              }
     }}
  />

编辑:更正评论后的代码