react-router-dom

react-router-dom是React提供给web端的路由插件，针对React Native有其它的插件

安装：

1	npm install react-router-dom --save

1 路由定义

在App.js中配置路由

<BrowserRouter>: 包裹所有的路由
<Route>: 设置具体的路由
- path: 设置路由的路径
- exact：只有路径完全匹配时才会显示
- component：配置路由对应的组件

import React, { Component } from 'react';
import Header from './common/header';
import Home from './pages/home';
import Detail from './pages/detail'
import {Provider} from 'react-redux'; //导入react-redux
import store from './store';   //导入store
import { BrowserRouter, Route } from 'react-router-dom';


class  App  extends Component {
  render() {
    return (
      <div >
        <Provider store = {store}>  
          <BrowserRouter>
            <Header/> 
            <Route path='/' exact component={Home}></Route>
            <Route path='/detail' exact component={Detail}></Route>
          </BrowserRouter>          
        </Provider>   
      </div>
    )
  }
  
}

export default App;

2 单页面路由跳转

2.1 `Link`方式

单页面跳转使用Link而不用a标签的原因：

a标签跳转会再次刷新页面，再次请求html文件，这样会造成性能的损耗
Link实现跳转时，不会再次请求html文件，这样既节省了性能也满足单页面应用的规则

Link的使用：

路由路径的定义：
- path: ‘路由路径’

1	<Route path='/detail' exact component={Detail}></Route>

使用Link标签的组件必须被<BrowserRouter>包裹

//导入
import { Link } from 'react-router-dom';

//使用
 <Link to='/跳转路径'>内容标签</Link>

2.2 `js`方式

/admin: 目标路由地址

1	this.props.history.push('/admin')

跳转带参数的形式
- 参数只能是字符串形式，对象、数组传递不了，简单数组（元素为数字或字符串）会解析成字符串后传递

1	this.props.history.push('/admin/' + params) //params:参数内容

注意：

只有在路由管理的直接组件中可以调用上面的接口

3 路由参数的传递

3.1 动态路由方式

动态路由方式传递参数就是在使用Link标签跳转时携带参数

定义路由既传参名称

<Route path='/路径/:参数名' exact component={组件名}></Route>
 
//案例
<Route path='/detail/:id' exact component={Detail}></Route>

传递参数

<Link to={'/路径/' + 参数值}>
    
//案列
<Link to={'/detail/' + item.id}>   //item.id = 1

组件中接受参数
- 可以通过取到的参数在componentDidMount生命周期函数中发送网络请求
1
2
3
4
this.props.match.params.参数名

//案例
this.props.match.params.id

3.2 `?id=`的形式

定义路由既传参名称

<Route path='/路径' exact component={组件名}></Route>
 
//案例
<Route path='/detail' exact component={Detail}></Route>

传递参数

<Link to={'/路径?id=' + 参数值}>
    
//案列
<Link to={'/detail?id=' + item.id}>   //item.id = 1

组件中接受参数
- 可以通过取到的参数在componentDidMount生命周期函数中发送网络请求
- 此处注意：返回值需要解析之后才拿得到参数
1
2
3
4
this.props.location.search

//返回值：?id=1
//需要解析`?id=1`拿到1

react-router-dom

1 路由定义

2 单页面路由跳转

2.1 Link方式

2.2 js方式

3 路由参数的传递

3.1 动态路由方式

3.2 ?id=的形式

2.1 `Link`方式

2.2 `js`方式

3.2 `?id=`的形式