React的路由——react-router-dom

路由的安装和引入

安装

cnpm i react-router-dom -S

引入

hash路由：HashRouter

import { HashRouter } from 'react-router-dom'

history路由：BrowserRouter

import { HistoryRouter } from 'react-router-dom'

注意

路由的所有配置项必须在HashRouter或者BrowserRouter包裹范围之内

路由的配置

我们以HashRouter为示例：↓

路由的显示

路由的显示需要依赖 Route 组件，所以需要先进行引入
```
import { HashRouter,Route } from 'react-router-dom'
```
配置 Route 组件的配置项
Route组件的参数：
- path：路由的匹配路径
- components：匹配成功后渲染的组件（值为组件名称）
- render：路径匹配成功后渲染的组件的render方式（值为一个函数，返回一个组件或标签）
- exact：完全匹配
```
// 引入所需的组件，用component方式渲染

import Home from './components/home'
import Classify from './components/classify'
import Order from './components/Order'

export default class App extends Component{
    render(){
        return (
         
             
                
                
            
        )
    }
}
```
```
// 或者用render的方式渲染
// ...

    }>
    }>
    }>

// ...
```
如此一来，路由的最基本的功能就完成了。

重点！！！！！！
component方式和render方式的区别：
1. 用component渲染页面的时候，会默认给渲染的组件传递三个值：history、match、location。render需要手动给函数加参数（也可以通过withRouter来搞定）：
```
// 传统写法：
{
        return 
    }}>

// 解构传值：
}>
```
2. render 可以渲染组件，也可以渲染标签
3. render 渲染的时候，可以进行传值。因为是标签，可以直接属性传值，props取值
4. 一般情况下，通过render 的形式进行路由嵌套
5. render 更自由，可以进行更多的业务逻辑

withRouter 高阶组件*

对 render 渲染的路由组件进行加工，使其拥有history、match、location三个参数

引入：

import { withRouter } from 'react-router-dom'

使用：

{{/* 导出时用 withRouter 对创建的组件进行加工，则组件内即可访问history、match和location */}}
export default withRouter(MyComponent);

路由的跳转方式

常规的路由的跳转有以下的几种方式：

a标签

a标签实现路由跳转很简单，我们并不需要做太多东西。
```
首页
分类
```
Link （没有选中标识的导航）

Link 跳转是嵌入在 react-router-dom 里的，所以需要先进行引入。
```
import { HashRouter,Route,Link } from 'react-route-dom'
```
然后再进行配置：
```
// Link组件的跳转路径在 to 属性里
首页
分类
```

NavLink (导航栏跳转——有选中标识的导航)

NanLink 和 Link 的区别不大，依然是先进行引入：
```
import { HashRouter,Route,NavLink } from 'react-route-dom'
```
然后进行配置：
```
// NavLink 组件的跳转路径也在 to 属性里
首页
分类
```
与 Link 组件不同的是， NAVLink 组件在活跃项身上会有一个类名为 active 的标识：

动态类名

于是可以在 active 中进行相对应的样式编写。

配置项：
1. to：需要跳转的路径
2. activeClassName：活跃项的类名（默认为 active ）
3. activeStyle：活跃项的样式
编程式导航

如果用 this.props.history.xxx 的方式，必须要有 history 参数，用 component 方式渲染的页面默认有，如果用 render 渲染，需要手动传参。
- this.props.history.push
  
  跳转到
```
this.props.history.push("/home");
```
- this.props.history.goBack
  
  返回
```
this.props.history.goBack();
```
- this.props.history.goForward
- this.props.history.go
- this.props.history.replace

路由传值

动态路由传值（常用）
- 在定义路由的时候通过 /:属性 的方式来定义传递的属性

在路由跳转的时候通过 /:值 的方式来传递数据
```
{item.name}
```

在需要接受数据的页面通过 this.props.match.params 来进行接收
```
接收到商品id为：{this.props.match.params.id}
```

query传值
- 在路由跳转的时候通过query传值的方式进行参数的传递
```
{item.name}
```

在需要接收数据的页面通过 this.props.location.search 进行接收
```
接收到商品id为：{url.parse(this.props.location.search).query}
```

内存传值（自己取的名）
- 在路由跳转的时候通过属性对象的方式进行参数的传递
```
{item.name}
```

jieshou this.props.location
```
接收到商品id为：{this.props.location.query.id}
```
因为这种方式把传递的值存在了对象里，所以刷新页面后值会消失，可以用于登录返回页面路径的存储

路由嵌套

路由如果要嵌套的话，父级路由必须要用 render 的方式来渲染，在函数内对子级路由进行操作。

{
        return (
            
                 {/* 显示父组件 */}
                
                
            
        )
    }}>

路由重定向——Redirect

路由重定向是由 Redirect 组件来完成的

import { Redirect } from 'react-router-dom'

//...

// 如果在 "/" 路径，重定向到 "/home" 路径

路由的单一匹配——Switch，完全匹配——exact

首先引入 Switch 组件，然后直接包裹在作用范围内

import { Switch } from 'react-router-dom'

// 用 Switch 组件包裹你想要作用的路由
export default class App extends Component{
    render(){
        return (
            
                
                    {/* exact 表示精准匹配，只有完全满足路径才会做相应操作 */}
                    
                    
                    
                
            
        )
    }
}

完整的路由嵌套：

{/* 一个完整的路由嵌套 */}
(
    
        
        
            
            
            
        
    
)}>

路由懒加载——react-loadable

使用路由的懒加载可以提升性能，增加Loading以提高用户体验等

安装

cnpm i react-loadable -S
引入
```
import loadable from 'react-loadable'
```

配置

不用路由懒加载的时候，组件是默认的引入方式：

import Home from './components/home'

用路由懒加载引入组件：

const Home = loadable({
    loader:()=>import("./components/home"),
    loading:Loading
    {/* Loading是自己的Loading组件 */}
})