React Router passt nicht

Question

Ich lerne React Router. Folgendes ist ein Problem, wenn ich Route verwende.

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

und der Router passen immer die Home-Route, egal, was ich die URL ändern, zeigen die Komponente immer "Home", habe ich etwas falsch machen? Wie kann ich es reparieren?

Und das ist mein reagieren und reagieren-Router Version:

"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

sollten Sie Switch verwenden, um sie zu wickeln alle Ihre Route nur erste Komponente abgestimmt zu machen.

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

Sie können in https://reacttraining.com/react-router/web/api/Switch