React Router 种类
BrowserHistory
-
操作我们BOM对象（window对象）上的
history实现的 -
该路由的切换原理是通过
pushState()和replaceState()方法来增加或替换历史记录,这个是H5提出来的因此会不兼容旧浏览器
HashHistory
- URL的哈希值
- hash模式背后的原理是
onhashchange事件,可以在window对象上监听这个事件,兼容性良好
区别
- HashHistory 在浏览器的地址栏上有一个
#例如：https://juejin.cn/#/xxx - BrowserHistory 在我们点击刷新按钮的时候会根据路由地址请求网络的，但 HashRouter 不会、
- 兼容性 HasHistory
React Router组件种类和作用
Link
- 用于路由跳转 这里的 to参数传递路由地址 于此相同的还有 NavLink
Route
- 用于路由匹配 当path中的地址和Link组件中的to的地址一样 去渲染相应的组件
- React 开启的是模糊匹配 如果需要开启精准匹配 添加
exact={true}
Switch
- 用于阻止路由匹配的过程中 匹配到之后不会向下匹配
Redirect
- 重定向, 当路由匹配不到结果的时候就回去重定向到该路径
App.jsx:
import React, { Component } from 'react'
import { Link,Route,Switch,Redirect,NavLink } from 'react-router-dom'
import Home from './page/Home'
import User from './page/User'
// Link ：用于路由跳转 这里的 to参数传递路由地址 于此相同的还有 NavLink
// Route : 用于路由匹配 当path中的地址和Link组件中的to的地址一样 去渲染相应的组件
// Switch : 用于阻止路由匹配的过程中 匹配到之后不会向下匹配
// Redirect : 重定向 当路由匹配不到结果的时候就回去重定向到该路径
export default class App extends Component {
render() {
return (
<div>
<Link to='/home'>Home</Link>
<br></br>
<NavLink to='/user'>User</NavLink>
<Switch>
{/*
这样也是可以匹配的 因为React默认是模糊匹配
<Route path='/home/a/b' component={Home}></Route>
*/}
<Route path='/user'component={User}></Route>
<Redirect to='/home'/>
</Switch>
</Switch>
</div>
)
}
}
BrowserRouter
- 表示该router 是
BrowserHistory模式
HashRouter
- 表示该router 是
HashHistory模式index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter,HashRouter } from 'react-router-dom';
import App from './App';
// BrowserRouter ： 表示该router 是BrowserHistory 模式
// HashRouter ：表示 该router 是HashHistory 模式
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
);
BrowserRouter 和 HashRouter 的区别
-
原理不同
BrowserRouter是BrowserHistory,HashRouter是HashHistory -
浏览器地址栏 path 表现形式不同
HashRouter地址栏带# -
刷新后对state参数的影响
-
BrowserRouter无影响，因为state保存在history对象中 -
HashRouter刷新之后state参数丢失
-
React Route 传递参数
params参数
-
路由链接（携带参数):
<Link to='/user/tome/18'>User</Link> -
编程式路由导航：
this.props.history.push('/user/${name}/${age}') -
注册路由（接受参数）：
<Route path='/user/:name/:age' component={User}></Route> -
组件接收参数：
const {name,age} = this.props.match.params
search
-
路由链接（携带参数):
<Link to='/user?name=tome&age=18'>User</Link> -
编程式路由导航：
this.props.history.push(`/user?name={name}&age={age}`)
-
注册路由（正常组册无需声明）：
<Route path='/user' component={User}></Route> -
组件接收参数:
User.jsx:
import React, { Component } from 'react'
import qs from 'querystring'
export default class User extends Component {
render() {
const {search} = this.props.location
// qs.parse() key=value转为key:value .slice（1）：重第一个位置提取后面的字符
const {name,age} = qs.parse(search.slice(1))
return (
<div>
<h1>我是User名字是：{name}, 年龄：{age}</h1>
</div>
)
}
}
state参数
-
路由链接（携带参数):
<Link to{{pathname:'/user',state{name:'tom',age:18}}}>User</Link> -
编程式路由导航：
this.props.history.push('/use',{name,age}) -
注册路由（接受参数）：
<Route path='/user' component={User}></Route> -
组件接收参数：
const {name,age} = this.props.loaction.states
withRouter 的使用
- withRouter 是 react-router-dom库提供的一个方法，这方法的作用就把一个一般组件可以加工为一个路由组件
import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'
//withRouter 是一个函数 返回值是一个具备history API的组件
class Header extends Component {
render() {
return (
<div>
</div>
)
}
}
export default withRouter(Header)
