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;
              }
     }}
  />

編輯 ：注釋后已更正代碼

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： 帶參數的路線

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建議采用更好的設置。