React-router-dom：2つのコンポーネントを1つのルートでレンダリングします。

Question

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

idが1の質問2からid2の質問2に移動する必要があります。質問1に問題なく移動できますが、しかし、私はthis.props.history.push('/test/2')を使って質問に行きたいとき、URLは変わりますが、私はquestion2にナビゲートしません。

アイデア？

Answer 1

idを処理する単一のQuestionコンポーネントがあり、適切な質問が表示されている必要があります。

あなたはRoute

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

EDITのrender方法使用して同じ操作を行うことができます。コメントの後に修正されたコードを

Answer 2

あなたは1つのルートでこれを行うには、コンポーネントを右質問を読み込むことができます：

<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/>の下の最初のコンポーネントと一致します。最初のパスと一致しない場合は、2番目のパスを試します。それがSwitchの仕組みです。したがって、あなたの例では、path=/test/:idというパステンプレートは、実際には/test/1と/test/2の両方に一致し、Routeは常にQuestion1になり、決してQuestion2になりません。ここでドキュメントをチェックしてください https://reacttraining.com/react-router/web/api/Switch

あなたが行うことができる一つの迅速な事は、あなたが2つだけQuestionのを知っているならば、あなたはすぐにあなたの問題を解決します

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

を行うことができますが、それはのように不合理なるように私はこれをお勧めしません。あなたはQuestionをさらに取得します。より良い設定は@palsrealmが推奨するものです。