React-router路由4.0版本用法

第一步：引包两个

命令：cnpm i -S react-router react-router-dom

第二步：用路由管理APP页面

1.创建主路由管理页面，在这里使用了路由嵌套

 import React, { Component } from 'react';
 import { Route, BrowserRouter } from 'react-router-dom'
 import App from '../App'
 import SubRouter from './SubRouter' //二级路由

 export default class ReactApp extends Component {
   render() {
     return (
       <BrowserRouter>
         <App>
           {/* 这里为了分离得彻底，使用组件嵌套，app组件跳到SubRouter组件*/}
           <Route path="/" component={SubRouter}></Route>
         </App>
       </BrowserRouter>
     )
   }
 }

2.创建二级路由页面，引入组件

 import React, { Component } from 'react'
 import { Route, Switch } from 'react-router-dom'
 import Home from '../Component/Home'
 import Movie from '../Component/Movie'
 import About from '../Component/About'

 export default class SubRouter extends Component {
   render() {
     return (
       // 路由配置
       <Switch>
         <Route exact path="/" component={Home}></Route>
         <Route exact path='/movie' component={Movie}></Route>
         <Route exact path="/about" component={About}></Route>
       </Switch>
     )
   }
 }

3.在App页面给显示位置，以及设置点击跳转

 import React, { Component } from 'react';
 import { Link } from 'react-router-dom'
 export default class App extends Component {
   render() {
     return (
       <div>
         {/* 点击路由跳转，使用react-router-dom的Link */}
         <ul>
           <li>
             <Link to='/'>首页</Link >
           </li>
           <li>
             <Link to='/movie'>电影</Link >
           </li>
           <li>
             <Link to='/about'>关于</Link >
           </li>
         </ul>

         {/* 在APP主页面，给SubRouter留显示位置*/}
         {this.props.children}
       </div>
     )
   }
 }

4.修改index.js需要渲染的组件，由渲染原来的APP改为渲染主路由，因为已经用路由管理App页面了

 import React from 'react';
 import ReactDOM from 'react-dom';
 import AppRouter from './AppRouter/AppRouter';
 import * as serviceWorker from './serviceWorker';

 ReactDOM.render(<AppRouter />, document.getElementById('root'));
 serviceWorker.unregister();

三.页面效果

四.文件目录

写得有什么不对的地方，还请大家多多指教，多谢。