React-router路由4.0版本用法

 1 import React, { Component } from ‘react‘;
 2 import { Route, BrowserRouter } from ‘react-router-dom‘
 3 import App from ‘../App‘
 4 import SubRouter from ‘./SubRouter‘ //二级路由
 5 
 6 export default class ReactApp extends Component {
 7   render() {
 8     return (
 9       <BrowserRouter>
10         <App>
11           {/* 这里为了分离得彻底，使用组件嵌套，app组件跳到SubRouter组件*/}
12           <Route path="/" component={SubRouter}></Route>
13         </App>
14       </BrowserRouter>
15     )
16   }
17 }

 1 import React, { Component } from ‘react‘
 2 import { Route, Switch } from ‘react-router-dom‘
 3 import Home from ‘../Component/Home‘
 4 import Movie from ‘../Component/Movie‘
 5 import About from ‘../Component/About‘
 6 
 7 export default class SubRouter extends Component {
 8   render() {
 9     return (
10       // 路由配置
11       <Switch>
12         <Route exact path="/" component={Home}></Route>
13         <Route exact path=‘/movie‘ component={Movie}></Route>
14         <Route exact path="/about" component={About}></Route>
15       </Switch>
16     )
17   }
18 }

 1 import React, { Component } from ‘react‘;
 2 import { Link } from ‘react-router-dom‘
 3 export default class App extends Component {
 4   render() {
 5     return (
 6       <div>
 7         {/* 点击路由跳转，使用react-router-dom的Link */}
 8         <ul>
 9           <li>
10             <Link to=‘/‘>首页</Link >
11           </li>
12           <li>
13             <Link to=‘/movie‘>电影</Link >
14           </li>
15           <li>
16             <Link to=‘/about‘>关于</Link >
17           </li>
18         </ul>
19 
20         {/* 在APP主页面，给SubRouter留显示位置*/}
21         {this.props.children}
22       </div>
23     )
24   }
25 }

1 import React from ‘react‘;
2 import ReactDOM from ‘react-dom‘;
3 import AppRouter from ‘./AppRouter/AppRouter‘;
4 import * as serviceWorker from ‘./serviceWorker‘;
5 
6 ReactDOM.render(<AppRouter />, document.getElementById(‘root‘));
7 serviceWorker.unregister();