React Router ne correspond pas

Question

J'apprends Routeur Routeur. Ce qui suit est un problème lorsque j'utilise 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

et le routeur correspond toujours la Route maison, peu importe ce que je change l'URL, le composant affiche en permanence "Home", ai-je fait quelque chose de mal? Comment puis-je le réparer?

Et voici ma réaction et la version réagir-routeur:

"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

Vous devez utiliser Switch pour envelopper tout votre Route pour rendre seulement le premier composant adapté.

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

Vous pouvez en lire davantage dans https://reacttraining.com/react-router/web/api/Switch