React路由 React-router-dom的使用

路由 react-router-dom

react的的插件库，专门做SPA应用
安装5版本的 npm install react-router-dom@5

路由的基本使用

1.明确好界面的导航区、展示区
2.导航区a标签改为Link标签
3.展示区写Route标签进行路径的匹配
4.在最外侧包裹一个 或者 

// 全局注册路由
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

import { Link, Route } from 'react-router-dom'
import About from "./components/About/index.jsx"
import Home from "./components/Home/index.jsx"
// 组件中编写路由器
{/* 原生html中靠a跳转不同的页面 */}
{/* About
Home */}

{/* 在React中靠路由切换组件 --编写路由链接*/}
{/* 指定适用的Router的类型 BrowserRouter */}
<Link className="list-group-item" to="/about">About</Link>
<Link className="list-group-item" to="/home">Home</Link>

// 注册路由
{/* 注册路由 */}
<Route path="/about" component={About}></Route>
<Route path="/home" component={Home}></Route>

NavLink 的使用

import {NavLink} from 'react-router-dom'
// NavLink的使用
{/* 使用NavLink  点谁给谁加active类名  可以使用  activeClassName="active" 添加点击之后要添加的类名 */}
<NavLink className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>

Switch的使用

1.通常情况下，path和component是一一对应的关系
2.Switch可以提高路由匹配的效率（单一匹配）

{/* Switch 如果多个组件匹配同一个路由只匹配第一个 */}
<Switch>
  <Route path="/about" component={About}></Route>
   <Route path="/home" component={Home}></Route>
</Switch>

路由组件与一般组件

1.写法不同
2.存放位置不同
3.接收到的props不同
    一般组件传递什么接收什么
    路由组件：接收到3个固定的属性：location、history、match
    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"

解决多级路径样式丢失的问题

1.public/index.html 中引入样式不写./ 写/（常用）
2.public/index.html 中引入样式不写 ./ 写%PUBLIC_URL% （常用）
3.使用 HasnRouter

路由的严格匹配和模糊匹配

1.严格匹配：路径必须完全匹配
2.模糊匹配：路径可以部分匹配
3.默认开启模糊匹配

// 开启严格匹配
<Route path="/home" excact={true} component={Home}></Route>

嵌套路由

1.嵌套路由的写法
2.嵌套路由的存放位置
3.嵌套路由的接收到的props不同
4.嵌套路由的严格匹配和模糊匹配
5.嵌套路由的默认开启模糊匹配
6. 注册子路由时要写上父路由的path

// 嵌套路由
<Route path="/home" exact={true} component={Home}>
  <Route path="/home/about" component={About}></Route>
</Route>

向路由组件中传递数据

1.params参数（常用）

// 向路由组件中传参
// 1.路由链接携带参数

{/* 向路由组件传递params参数 */}
<Link to={`/home/message/Detail/${item.id}`}>{item.title}</Link>&nbsp;&nbsp;

// 2.注册组件声明参数

/* 声明接收params参数 */}
<Route path="/home/message/Detail/:id" component={Detail} />

// 3. 在组件中接收参数
// 接收params参数
const {id} = this.props.match.params

2.传递search参数

{/* 向路由组件传递search参数 */}
<Link to={`/home/message/Detail/?id=${item.id}`}>{item.title}</Link>&nbsp;&nbsp;

{/* search参数无需声明接收 */}
<Route path="/home/message/Detail" component={Detail} />


// 接收search参数
import qs from 'qs'
const {search} = this.props.location
const {id} = qs.parse(search.slice(1))

// state参数

3.传递state参数

 {/* 向路由传递state参数 */}
<Link to={{pathname:"/home/message/Detail",state:{id:item.id}}}>{item.title}</Link>&nbsp;&nbsp;

{/* state参数无需声明接收 */}
<Route path="/home/message/Detail" component={Detail}/>


// // 接收state参数
const {id} = this.props.location.state

push 和 replace

push 进行压栈操作 记录每一条操作

replace 进行替换操作 不记录

{item.title}  

编程式路由导航

<!-- params -->
 this.props.history.push(`/home/message/Detail/${item.id}`)

 <!-- search -->
 this.props.history.push(`/home/message/Detail?id=${item.id}`)

 <!-- state -->
 this.props.history.push(`/home/message/Detail`,{id})

//  注册和接收和Link一样


//  回退
this.props.history.goBack()
// 前进
this.props.history.goForward()

// 前进/后退几步
this.props.history.go(1) //前进一步
this.props.history.go(-1) //后退一步


// 讲普通组件抛出成路由组件  让一般组件具备路由组件特有的api
import {withRouter} from 'react-router-dom'

export default withRouter(name)

BrowserRouter 和 HasnRouter的区别

1.底层原理不同
    BrowserRouter使用H5的history API 不兼容IE9以下的版本
    HashRouter的使用是URL的哈希值
2.path的表现形式不一样
    BrowserRouter的路径中没有#
    HashRouter的路径中包含#
3.刷新后对路由state参数的影响
    1.BrowserRouter没有任何影响
    2.HashRouter刷新后会导致路由state参数的丢失
4.备注：HashRouter可以用于解决一些路径错误相关的问题