目录

1.路由介绍

2.路由使用

3.路由组件和一般组件

4.Switch 单一匹配

5.解决二级路由样式丢失的问题

6.路由精准匹配和模糊匹配

7.Redirect路由重定向

1.路由介绍

路由是根据不同的 URL 地址展示不同的内容或页面，在 SPA 应用中，大部分页面结果不改变，只改变部分内容的使用。一个路由其实就是一个映射关系。

前端路由常见的两种模式：hash和history

hash模式：路由上会有个#号，#后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。使用 Javascript 来对 location.hash 进行赋值，改变 URL 的hash值，每次 hash 值的变化，会触发hashchange 这个事件。然后我们便可以监听hashchange来实现更新页面部分内容的操作。

history模式：使用history模式可以让URL看起来更加友好，更符合传统的URL访问习惯，不会出现#号，更加好看。当用户刷新页面之类的操作时，浏览器会给服务器发送请求，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面（nginx配置try_files重定向到index.html），否则会出现404。HTML5 提供了 History API 来实现 URL 的变化，其中最主要的 API 有以下两个：
history.pushState() 新增一个历史记录
history.replaceState() 直接替换当前的历史记录

2.路由使用

• 安装【npm i react-router-dom@5】
• 引入使用到的一些标签【import{Link,Route}from 'react-router-dom'】
• 编写路由链接【Link,NavLink】
• 注册路由【 <Route path="/home" component={Home}></Route>】
• 路由包裹【ReactDOM.render(<BrowserRouter> <App/> </BrowserRouter>, document.getElementById("root"));】整个 App 组件标签采用 BrowserRouter （或使用HashRouter）标签包裹，这样整个 App 组件都在一个路由器的管理下。

{/*  编写路由链接*/}
<Link to="/home">Home</Link>
<NavLink activeClassName="nav-active" to="/home">Home</NavLink>
<MyNavLink to="/home">Home</MyNavLink> //通过封装把冗长的NavLink上的标签放到组件上去了

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom/cjs/react-router-dom'

export default class MyNavLink extends Component {
  render() {
    console.log("MyNavLink接收父组件传值props",this.props);
    return (
        <NavLink activeClassName="nav-active" {...this.props}></NavLink>
    )
  }
}

<MyNavLink to="/home" a={1} b={2}>Home</MyNavLink>

history:
    go: ƒ go(n)
    goBack: ƒ goBack()
    goForward: ƒ goForward()
    push: ƒ push(path, state)
    replace: ƒ replace(path, state)
location:
    pathname: "/about"
    search: ""
    state: undefined
match:
    params: {}
    path: "/about"
    url: "/about"

<MyNavLink to = "/base/about" >About</MyNavLink>

<Route path="/base/about"component={About}/>

 <link href="/css/bootstrap.css" rel="stylesheet"> 

 <link href="%PUBLIC_URL%/css/bootstrap.css" rel="stylesheet">

<MyNavLink to = "/home/a/b" >Home</MyNavLink>
<Route path="/home"component={Home}/>

<Route exact={true}  path="/home" component={Home}/>
或者
<Route exact path="/home" component={Home}/>

 <Switch>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
    <Redirect to="/home"/>
</Switch>