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();

 

三.頁面效果

 

四.文件目錄

 

寫得有什么不對的地方，還請大家多多指教，多謝。