Question

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

我需要从Question1（其id为1）导航到question2，其id应为2.我可以从test中导航到question1而没有问题，但是当我想回答问题时使用this.props.history.push('/test/2') URL更改但我没有导航到问题2。

有什么想法吗？

Answer 1

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

您可以使用render

的Route方法执行相同的操作

  <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>
    )
  }
})

doc：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：在一条路线下渲染两个组件

3 个答案: