React-Router 4.0 版本之前安装
yarn add react-router
or
npm install --save react-router
React-Router 4.0 版本之后安装
yarn add react-router-dom
or
npm install --save react-router-dom
在React-Router 4.0 开始，官方提供一个基础的路由 react-router。
然后在根据各个平台在退出相应的插件包：
-
比如浏览器平台就推出
react-router-dom -
比如React-Native平台就推出
react-router-native
这些插件包都包含了核心
react-router
目前使用的版本
"react-router-dom": "^5.1.2",
基于5.0版本
- 从4.0版本开始一切皆组件
- react-router: 提供一些router的核心API，包括
Router,Route,Switch等 - react-router-dom: 提供
BrowserRouter,HashRouter,Route,Link,NavLink
react-router-dom
核心用法
- HashRouter 和 BrowserRouter
- Route: path(匹配路由属性), exact(路由精准匹配), component(匹配后组件加载), render(绘制)
- NavLink, Link
- Switch (控制、流转)
- Redirect (重定向)
HashRouter路由：
- http://localhost:3000/#/admin/buttons (中间有个 # 符号)
BrowserRouter路由：
- http://localhost:3000/admin/buttons (中间无 # 符号)
Route用法
如果只想匹配一个路由，那么建议加上
exact={true}属性进行精准路由！
// 精准匹配，路由必须是 /
<Route exact path='/' component={Home}>
// Buttons 是一个组件 或者 组件页面
<Route path='/admin/ui/buttons' component={Buttons}>
<Route path='/admin/ui/buttons' component={() => <Buttons/>}>
// 给组件传递参数 name
<Route path='/admin/ui/buttons' render={() => <Buttons name={this.state.btnName}/>}>
// 携带参数path参数传递, 比如: /admin/ui/threes/7
<Route path='/admin/ui/threes/:number' component={threes}>
获取path的参数
import { useRouteMatch, useParams} from 'react-router-dom'
......
// 获取 path 参数, http://localhost:3000/admin/ui/threes/:number
// (1)取值这个path参数传递的值
this.props.match.params.number
// (2)去这个path参数也可以, 从 import {useRouteMatch, useParams} from 'react-router-dom'
// 获取 path 参数, http://localhost:3000/admin/ui/threes/:number
const { number } = useParams()
// (3)path 路径， url 路径, params 参数
const { path, url, params } = useRouteMatch()
Route里面 component 和 render 这两个属性的使用：
如果要通过 路由 传递参数到 组件 里面，那么请使用
render方式，其他方式可以使用component方式。
可以看看这篇文章：https://www.jianshu.com/p/a2a9b469a422
Link用法
<Link to='/home'> home </Link>
<Link to={{ pathname: '/three/7' }}> Three 7 </Link>
<Link to={{ pathname: '/three/:number' }}> Three 7 </Link>
// 取值这个path参数传递的值
this.props.match.params.number
<Link /> 里面的 to 属性是一个对象， 比如：传递一个基本的location对象也可以在后面加上传递其他的对象, 这些对象值都可以通过 props 获取这里面的参数
{
pathname: '/home',
search: '?name=wxm',
hash: '',
key: 'abc123',
state: {这里可以加上其他对象}
}
Link 和 NavLink 区别
<NavLink>是<Link>的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有：
- activeClassName(string)：设置选中样式，默认值为active
- activeStyle(object)：当元素被选中时，为此元素添加样式
- exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
- strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
- isActive(func)：判断链接是否激活的额外逻辑的功能
// activeClassName选中时样式为selected
<NavLink
to="/faq"
activeClassName="selected"
>FAQs</NavLink>
// 选中时样式为activeStyle的样式设置
<NavLink
to="/faq"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
>FAQs</NavLink>
// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink
to="/events/123"
isActive={oddEvent}
>Event 123</NavLink>
Switch用法
<Switch>
// Buttons 是一个组件 或者 组件页面
<Route path='/admin/ui/buttons' component={Buttons}>
<Route path='/admin/ui/loading' component={Loading}>
<Route path='/admin/ui/tabs' component={Tabs}>
</Switch>
Switch 意义：
比如访问
/admin/ui/buttons路由：
(1)如果不加上<Switch/>, 那么这个路由在匹配到/admin/ui/buttons路由之后，还会继续匹配，看是否还有其他相似的路由(相似路由：/admin/ui,/admin,/),
一直把这些路由里面的相似路由读取完，然将这些路由全部显示在页面上。
(2)如果加上<Switch/>,那么这个路由在匹配到/admin/ui/buttons路由之后，就会直接返回这个路由的 组件页面
Redirect用法
- 路由重定向
// 重定向到 /admin/home, 这个 to 也可以是一个对象
<Redirect to="/admin/home"/>
// Redirect 配合 Switch 使用
<Switch>
// Buttons 是一个组件 或者 组件页面
<Route path='/admin/ui/buttons' component={Buttons} />
<Route path='/admin/ui/loading' component={Loading} />
// from 匹配到的URL，to表示要跳转到的URL，配合 Switch 下有效
// 如果 from 里面的URL携带的参数，想被 to 里面也进行使用，就必须把这个参数也要加在 to 里面
<Redirect from="/old/admin/tabs" to='/admin/ui/tabs' />
</Switch>
这个 to 属性也可以是一个对象
{
pathname: '/home',
search: '?name=wxm',
hash: '',
key: 'abc123',
state: {这里可以加上其他对象}
}
<Redirect /> 里面的 from 属性：
from匹配URL，to就表示要跳转到的URL，配合<Switch/>下有效。
如果from里面的URL携带的参数，想被to里面也进行使用，就必须把这个参数也要加在to里面。
例如：
// Redirect 配合 Switch 使用
<Switch>
// 省略其他的路由 .....
<Redirect from="/old/admin/tabs/:number" to='/admin/ui/tabs/:number' />
</Switch>
如果我访问 http://localhost:3000/old/admin/tabs/7 ，那么就会配 from 里面/old/admin/tabs/:number匹配到，然后会重定向到/admin/ui/tabs/:number。那么我 to 属性想拿到 from 里面的 path 参数，那么 to 里面也要加上相应的参数(也就是 :number)
网友评论