React-router
React Router之前版本的思想是传统的思想:路由应该统一在一处渲染, Router 4之后是这样的思想:一切皆组件
React Router包含了四个包:
包名 | Description |
---|---|
react-router | React Router核心api |
react-router-dom | React Router的DOM绑定,在浏览器中运行不需要额外安装react-router |
react-router-native | React Native 中使用,而实际的应用中,其实不会使用这个。 |
react-router-config | 静态路由的配置 |
主要使用react-router-dom
- 安装
使用
React中路由模式有两个
HashRouter #/home hashchange 不需要后端支持
BrowserRouter /home H5提供的popchange 后端支持的
//index.js中
import { BrowserRouter as Router } from 'react-router-dom'
ReactDOM.render(
<Router>
<App />
</Router>
, document.getElementById('root'));
重定向
-
引用
import { Route,Redirect } from 'react-router-dom'
-
包含了Route的引用
-
使用
<Redirect from = "/" to = "/home" exact/>
- from:来源
- to:去向
- exact:完全匹配
Route
-
路由的展示区域
- path:路由路径
- component:路由路径对应的展示的组件
- render:表示渲染一个组件
- 返回一个jsx结构
- 组件
- 函数
- 返回一个jsx结构
- children:表示子组件
- exact:完全匹配
<Route path = "/home" component = { Home } <Route path = "/detail/:id" component = { Detail } /> //动态路由 <Route path = "/account/login" component = { Login }/> //二级路由
-
Route组件身上component vs render vs children
- component的话是渲染一个组件,会给这个组件添加几个路由属性
- location
- history
- match
- 具有以上属性的组件我们称之为路由组件
- render 的话仅仅是渲染一个组件,不会给这个组件添加任何属性
- children 也是渲染一个组件,但是不管你的路由路径是什么,它都渲染
- 使用
component
的方式是不能直接在组件上添加属性的。所以,React Router的Route
组件提供了另一种渲染组件的方式render
, 这个常用于页面组件级别的权限管理。
- component的话是渲染一个组件,会给这个组件添加几个路由属性
Switch
-
表示一次只能展示一个组件
-
可以实现类似按需加载组件的作用,可以起到一定的性能优化作用
-
引入
import { Switch,Route } from 'react-router-dom'
<Switch> <Route path = "/home" component = { Home }/> </Switch>
路由的跳转
- react-router-dom 路由的跳转有两个组件: Link NavLink( NavLink用于激活的路由)
- 引入
import { NavLink } from 'react-router-dom'
<NavLink
to = { item.path } //跳转路径
activeClassName = "active" //激活类名
>
动态路由
<Route *path* = "/list" *component* = { List }/>
<Route *path* = "/list/:id" *component* = { List }/>
-
以上两个形式都可以,但是如果写了/:id之后,路径必须全跟,且必须有个id
-
路由传参
-
to属性中为对象时
<Link to = { {} } > </Link>
-
pathname:跳转的路径
-
search:
?name=aaa
传递的url(参数) -
state:{ fromDashboard: true } // 自定义属性存在location中
-
hash: '#the-hash', // 在url参数后面的hash值
-
-
-
路由接参(search传递的参数)
- 可以使用qs模块
import qs from 'querystring
qs.parse(this.props.location.search.slice(1))
- 可以使用qs模块
编程式导航
- push
- push会将我们的操作存储浏览器的历史纪录
- replace
- replace不会将我们的操作存储到浏览器的历史纪录,效果看上去像返回了二级
常规跳转
- go
- goBack
withRouter
- 它的作用就是将普通组件改成伪路由组件
- 解决返回等功能时,Layout组件上没有路由属性的问题
- 监听整个项目路由变化情况
import { withRouter } from 'react-router-dom'
class Layout extends Component{}
export default withRouter(LayOut)