1. Installation of the route:
| $ NPM install-s React-router |
2. Introduction of routing Files
| Import {Router, Route, browserhistory} from ' React-router '; |
3. Configure the Router
Lateral route (do jump switch)
Const ROUTER = (
<router history={browserhistory}>
<route path= "/" component={app}/>
<route path= "About" component={about}/>
<route path= "Concat" component={concat}/>
<route path= "List/:id" component={list}/>
</Router>
);
Render the main component into the DOM
Reactdom.render (Router, document.getElementById (' app ')); |
Nested routines (nesting)
Const ROUTER = (
<router history={browserhistory}>
<route path= "/" component={app}>
<route path= "About" component={about}/>
<route path= "Concat" component={concat}/>
<route path= "List/:id" component={list}/>
</Route>
</Router>
); |
Application:
Class App extends React.component {
Render () {
Return (
<div>
<p>
by <a href= "http://stylechen.com/" target= "_blank" >stylechen.com</a>
</p>
<link to= "/" >Home</Link>
<ul>
<li><link to= "/" >Home</Link></li>
<li><link to= "/about" >About</Link></li>
<li><link to= "/concat" >Concat</Link></li>
<li><link to= "/list/001" >list 001</link></li>
<li><link to= "/list/002" >list 002</link></li>
</ul>
</div>
);
}
} |
10 minutes to fix react-router.
