10分钟搞定react-router
1.路由的安装:
2.引入路由文件
import {Router, Route, browserHistory} from 'react-router'; |
3.配置路由器
平级路由(做跳转用)
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')); |
嵌套路由(做嵌套)
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> ); |
应用:
class App extends React.Component { render() { return ( <div> <h1>React Router Demo</h1> <hr /> <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分钟搞定react-router 的全部内容,
来源链接:
utcz.com/z/382252.html