路由

单页面应用程序

• SPA 单页面应用程序，整个应用钟只有一个页面
• MPA 多页面应用程序，整个应用中有很多页面

优势

1. 加快页面响应速度，降低了对服务器的压力
2. 更好的用户体验，运行更加流畅

缺点

• 不利于 SEO 搜索引擎优化

React路由

为了有效的使用单个页面来管理原来多页面功能，前端路由应运而生

前端路由是一套映射关系：锚点值和组件的映射

路由的简单自我实现

当锚点值发送改变时，会触发一个 hashchange 事件

componentDidMount(){
    window.addEventListener('hashchange',()=>{
        this.setState({
            currentHash:window.location.hash.slice(1)
        })
    })
}

对 state 存储的 currentHash 值进行判断做出对应的组件显示

{currentHash === '/home'&&<home></home>}
{currentHash === '/my'&&<my></my>}
{currentHash === '/f'&&<f></f>}

React-Router

下载对应的包模块

npm install react-router-dom 下载 web 开发的路由包

import {HashRouter,Link,Route} from 'react-router-dom'

return (
	<HashRouter>
    	<Link to="/home">首页</Link>
        <Link to="/my">我的</Link>
        <Link to="/friend">朋友</Link>
    	<Route path = "/home" component={Home}><Route>
    	<Route path = "/my" component={My}><Route>
        <Route path = "/friend" component={Friend}><Route>
    </HashRouter>
)

• Link 路由导航链接
• Route 路由指定规则
• HashRouter 路由入口

router 包还提供了一个 BrowserRouter 替代 HashRouter 不会显示锚

路由的执行过程

1. 点击 Link 组件，修改了浏览器地址的 url
2. React 路由监听到地址栏 url 的变化 hashChange popState
3. React 路由内部遍历所有 React 组件，使用路由规则 path 与 pathname 进行匹配
4. 当路由规则能够匹配地址栏中的 pathname 时，就展示该 Router 组件的内容

NavLink

Link 组件最终会渲染为 a 标签，用于指定路由导航

• to 属性
• 无法展示高亮

NavLink 组件，一个更特殊的 Link 组件，可以用于指定当前导航的高亮

• to 属性
• activeClass 用于指定高亮的类名，默认的类名为 active
• exact 精准匹配，表示必须精准匹配类名才生效（根节点）

Switch与404

这是 react-router-dom 提供的一个组件

在 Switch 组件中，不管有多少个路由规则，只会渲染匹配到的第一个路由规则

因此，通过 Switch 组件非常容易的实现 404 错误页面的显示

<Switch>
	<Route path = "/home" component={Home}><Route>
   	<Route path = "/my" component={My}><Route>
    <Route path = "/friend" component={Friend}><Route>
    <Route component={NoMatch}><Route>
</Switch>

路由嵌套

路由的嵌套和一级路由的使用类似

<Route path = "/my/list" component={List}><Route>

需要注意的是

• 路由的嵌套不需要导入 HashRouter ，已经有路由入口了
• 路由的嵌套需要加上父级路由的地址，才能匹配到子路由

重定向

Redirect 由路由提供的重定向组件

<Redirect exact from="/" to="/home"></Redirect>

编程式导航

在使用 Router 路由规则的使用，会给加载的组件传递三个参数

• history 是 React 路由提供的，用于获取浏览器历史记录的相关信息
• push(path) : 跳转到某个页面，参数 path 表示要跳转的路径
• go(n) : 前进或后退到某个页面，参数 n 表示前进或后退的页面数量

handleClick= ()=>{
    this.props.history.push('./home')
    this.props.history.go(-1)
}

动态路由参数

<Router path="/detail/:id" component={Detail}> </Router>

const {match}=this.props

<div>{match.params.id}</div>

可以获取到动态路由的参数

实现路由守卫

<Route path = '/login' render = {(props)=><Login {...props}/>></Route>

AuthRoute封装

基本结构

export default class AuthRoute extends Component{
  render(){
    const {component:Component,...rest} = this.props
    return (
    	<Route {...rest}
  		 render = {(props)=>{
         if(hasToken()){
            return <Component {...props}/>
         }else{
           	return <Redirect to='/login'/>
         }
       }}>
      </Route>
    )
  }
}