react-router踩坑

前言

react-router经过很多版本更新，目前是v4版本，坑源自于不同版本的api文档不规范，本文记录react-router-domV4在项目中的使用。

React Router文档，V2/V3到V4的迁移指南

Router.jsx

import React,{Component} from "react";
import App from "./App"
import Home from "./pages/home"
import Login from "./pages/login";
import Registe from "./pages/registe";
import {BrowserRouter,Switch,Route,Redirect} from 'react-router-dom';

export default class extends Component {
    render() {
        return <BrowserRouter>
                <App>
                    <Switch>
                        <Route exact path='/' component={Home}/>
                        <Route path='/registe' component={Registe}/>
                        <Route path='/login' component={Login}/>
                    </Switch>
                </App>
            </BrowserRouter>
    }
}

App.js

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  render() {
    return (
      <div>
          {/* 路由外的部分 */}  
          <header>
              公共头部
          </header>
          {/* 路由嵌套 */}
          {this.props.children}
      </div>
    );
  }
}

export default App;

脚本跳转

this.props.history.push(PATH)

原文=> http://blog.thephenix.com/2018/07/31/FSRreactRouter/ 【请尊重版权】