リアクタールーターが一致しません

Question

リアクタールーターを学習しています。 Routeを使用すると、次のような問題が発生します。

const OPSTIONS = [ 
 
\t { 
 
\t \t name: "home", 
 
\t \t path: "/", 
 
\t \t main:() => <h1>Home</h1>, 
 
\t \t sidebar:() => <h1>Home</h1> 
 
\t }, 
 
\t { 
 
\t \t name: "mike", 
 
\t \t path: "/mike", 
 
\t \t main:() => <h2>mike</h2>, 
 
\t \t sidebar:() => <h3>mike</h3> 
 
\t }, 
 
\t { 
 
\t \t name: "jerry", 
 
\t \t path: "/jerry", 
 
\t \t main:() => <h2>jerry</h2>, 
 
\t \t sidebar:() => <h3>jerry</h3> 
 
\t }, 
 
\t { 
 
\t \t name: "jim", 
 
\t \t path: "/jim", 
 
\t \t main:() => <h2>jim</h2>, 
 
\t \t sidebar:() => <h3>jim</h3> 
 
\t }, 
 
] 
 

 
ReactDOM.render(
 
\t <Router> 
 
\t \t <div> 
 
\t \t \t <ul> 
 
\t \t \t \t {OPSTIONS.map(function(e, index) { 
 
\t \t \t \t \t return <li key={index}><Link to={e.path}>{e.name}</Link></li> 
 
\t \t \t \t })} 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </Router>, 
 
\t document.getElementById("left") 
 
); 
 

 
ReactDOM.render(
 
\t <Router> 
 
\t \t <div> 
 
\t \t \t {OPSTIONS.map(function(e, index) { 
 
\t \t \t \t return <Route exact key={index} path={e.path} component={e.main}></Route> 
 
\t \t \t })} 
 
\t \t </div> 
 
\t </Router>, 
 
\t document.getElementById("main") 
 
)

<div id="header"></div> 
 
    <div id="container"> 
 
    <div id="main"></div> 
 
    <div id="left"></div> 
 
    <div id="right"></div> 
 
    </div> 
 
<div id="footer"></div>

enter image description here

とルータは常にホームルートと一致して、私は間違って何かを作った、関係なく、私は、URLを変更するもの、コンポーネントは常に、「ホーム」を表示していますか？どうすれば修正できますか？

そして、これが私の反応と反応し、ルータのバージョンです：

"devDependencies": { 
 
    "react": "^15.6.1", 
 
    "react-dom": "^15.6.1", 
 
    "react-hot-loader": "^1.3.1", 
 
    "react-router": "^4.2.0", 
 
    "react-router-dom": "^4.2.2", 
 
    }

Answer 1

あなたはすべてのあなたのRouteのみ最初に一致したレンダリングコンポーネントにそれをラップするSwitchを使用する必要がありますが。

<Router> 
    <Switch> 
     {OPSTIONS.map(function(e, index) { 
      return <Route exact key={index} path={e.path} component={e.main}></Route> 
     })} 
    </Switch> 
</Router> 

あなたが使用しているバージョンhttps://reacttraining.com/react-router/web/api/Switch