react-router踩坑

前言

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

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

Router.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div>
{/* 路由外的部分 */}
<header>
公共头部
</header>
{/* 路由嵌套 */}
{this.props.children}
</div>
);
}
}

export default App;

脚本跳转

1
this.props.history.push(PATH)

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