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 的问题 1 导航到 ID 应为 2 的问题 2。我可以毫无问题地从测试导航到问题 1，但是当我想使用 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;
              }
     }}
  />

编辑：评论后更正代码

Answer 2

您可以通过一条路线完成此操作，并在您的组件中加载正确的问题：

<Route path="/test/:id" component={Question} />

// Question.js
export default React.createClass({
  render() {
    return (
      <div>
        <h2>Question {this.props.params.id}</h2>
      </div>
    )
  }
})

文档：route-with-parameters

Answer 3

这个问题是 <Switch> 在这种情况下会匹配 <BrowserRouter/> 下的第一个组件。如果它不匹配第一个路径，它将尝试第二个。这就是 Switch 的工作原理。因此，在您的示例中，path=/test/:id 的路径模板实际上匹配 /test/1 和 /test/2，并且 Route 始终呈现 Question1 而从不呈现 Question2。在这里查看文档 https://reacttraining.com/react-router/web/api/Switch.

您可以快速做的一件事是，如果您知道自己只有两个 Question，那么您可以做

          <Route exact
            path="/test/1"
            component={Question1}
          />
          <Route exact
            path="/test/2"
            component={Question2}
          />

这会立即解决您的问题，但我不推荐这样做，因为当您获得更多 Question 时它会变得不合理。更好的设置是@palsrealm 推荐的。

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

React-router-dom: Render two components under one route

javascript

reactjs

react-router

react-router-dom