1. 环境配置

1.1搭建脚手架

1.1.1create-react-app

npm install -g create-react-app

1.1.2 创建项目 react-app

create-react-app react-app
//react-app是项目名称,可以更改

1.1.3 初始化

cd react-app //进入项目
npm start

1.2 安装react-router

1.2.1

安装
npm install --save react-router-dom
引入所需对象
import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
//把BrowserRouter重命名为Router 也可以不修改

2.代码实现

2.1简单路由跳转

App.js里面需要写入基本内容

1.react-router必须导入的对象

BrowserRouter:使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步
HashRouter

import React from 'react'; 
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

2.引入你需要写的页面的地址

 import Home from './xxxx/xxx'  (路径地址)

3.引入路径，及组件信息

Link是react路由中的点击切换到哪一个组件的链接
Route代表了你的路由界面
path代表路径
component代表路径所对应的界面
exact 代表严格匹配，例如：'/home'与 "/"在一般情况下是匹配的，加上exact之后就只会匹配‘/’
```
   <Router>
  <Link to='/home'>go to pageHome</Link>
  <Route exact path="/" component={Home}></Route>
  </Router>
```
4.Switch

switch仅渲染与当前位置匹配的第一个子元素，需要把 / （首页放在最后）

Redirect重定向

   import {BrowserRouter as Router, Route, Link，Redirect} from 'react-router-dom'
 <Redirect to='/'></Redirct>

组件页面需要内容

1.Router的渲染方式一：类

render : 一个返回React element的函数。当匹配成功后调用该函数

 class B extends Component {
 render() {
     return (
         <div>
             page B
             {/* 接收路由传递过来信息 */}
         <p>{this.props.params.id}</p>
         <p>{this.props.params.name}</p>
         </div>
     );
 }

2.Router的渲染方式一：函数

const C=({match})=>{
return(
    <div>
            page C
          <p>{match.params.id}</p>
    </div>
) 
}

3.编程式导航

props下的history属性可以用来控制页面的跳转
push(’/’)方法跳转到对应页面
go() 后退或前进n页
goBack() 后退一页
goForward() 前进一页

<button onClick={()=>{this.props.push('/')}>点击跳转<button>

withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。无需一级级传递 react-router 的属性，当需要用的router 属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息

<RouterChange/>
const RouterChange=withRouter(({history})=>
<button onClick={()=>{history.push('/')}>点击跳转<button>
)

4.阻止跳转Prompt

使用Prompt 组件:when 为布尔值是否开启验证
message: string 当用户离开当前页面时，设置的提示信息

message: func 当用户离开当前页面时，设置的回掉函数

   import {BrowserRouter as Router, Route, Link，Prompt} from 'react-router-dom'
   <Prompt when={true} message={
       (loaction)=>{
           return '确定要离开此页面？'
       }
   }></Prompt>

5.NavLink

1.<NavLink>是<Link>的一个特定版本，会在匹配上当前的url的时候给
已经渲染的元素 添加参数
2.activeClassName(string):设置选中样式， 默认值为active 
3.activeStyle(object):当元素被选中时，为此元素添加样式
4.isActive(func)判断链接是否激活的额外 逻辑的功能

React 全家桶--React