路由
简介
react中,使用路由的是react-router
react
- react.js 类似于vue.js web(BS构架的项目)
- react-native 简称RN 开发原生APP (android ios)
react-router
- react-router :是下面两种的基础,浏览器和原生app的通用部分
- react-router-dom:用于浏览器端
- react-router-navtive:用于原生app
react-router-dom:
一些组件:
组件名必须大写
- < BrowserRouter/>
- < HashRouter />
- < Route />
API:
- history对象
- match对象
- location
react-router:核心
react-router-dom:浏览器中使用的路由组件库 里面已经包含了react-router核心。
react-router-native:在RN中使用。
安装路由
安装路由npm i react-router-dom
activeClassName 点击切换的样式
部分组件和API
一些组件:
<BrowserRouter />
<HashRouter />
<Route />
<Redirect />
<Link />
<NavLink />
<Switch />
API:
history对象
match对象
withRouter函数
在我们使用路由时,默认Props上面的就有三个东西:
history
match
location
嵌套路由
基本路由之BrowserRouter或HashRouter的使用:
< BrowserRouter /> 或 < HashRouter /> 包在根组件外面。
作用:让根组件以及所有的子组件都可以使用路由
BrowserRouter: 就是vue中的history路由模式
HashRouter: 就是vue中的hash路由模式
1)render() {
return (
<HashRouter>
<div>
App
</div>
</HashRouter>
);
}
2)render() {
return (
<div>
<HashRouter>
App
</HashRouter>
</div>
);
}
3)还可以在入口文件中使用。
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>,
document.getElementById('root')
)
可以给BrowserRouter或HashRouter起别名:
import { HashRouter as Router } from "react-router-dom"
使用:
render() {
return (
<div>
<Router>
App
</Router>
</div>
);
}
< Link>的使用:
也是react-router-dom中的提供的组件,类似于vue中的router-link,是用来实现路由导航的。
<li><Link to="/home">首页</Link></li>
<li><Link to="/about">关于</Link></li>
< Route /> 设置匹配规则以及路由的出口:
在vue中,规则是写在一个单独的文件中,出口是router-view。
在react中,规则以及路由的出口在写在一起的。
< Route /> 这个组件就是用来设置规则以及提供路由的出口
{/* 路由的出口 */}
<Route path="/home"><Home /></Route>
<Route path="/about"><About /></Route>
< NavLink />
< Link>组件功能比较弱,在React-router-dom中,还
提供了一个组件,叫< NavLink />。
这个< NavLink>我们可以设置点击时的样式
<NavLink className="nav-item" activeClassName="selected" to="/home">首页</NavLink>
<NavLink className="nav-item" activeClassName="selected" to="/about">关于</NavLink>
封装NavLink组件:
<MyNavLink to="/about">关于</MyNavLink>
import React from "react"
import {NavLink} from "react-router-dom";
export default class MyNavLink extends React.Component{
constructor(props) {
super(props);
}
render() {
return(
<NavLink {...this.props} className="nav-item" activeClassName="selected"></NavLink>
)
}
}
NavLink好处:可以在生成路由链接基础上,如果是当前的路由的,设置激活的样式。
Switch组件
渲染第1个与当前访问地址区域的< Route>或< Redirect>。
Redirect组件
重定向路由
<Redirect path="/" to="/home"></Redirect>
对错误url处理方式有两种方式:
1)只要url错误,直接重定向到某个路由下:
<Redirect path="*" to="/home"></Redirect> 这个path="*" 可以不写
2)需要写一个404组件,如果url匹配不到,渲染404组件
<Route path="*" component={NotFount}></Route>
withRouter
高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.
import {withRouter} from 'react-router-dom'
路由小结
react-router-dom中提供的常用组件:
<BrowserRouter> as <Router> 包在APP组件最外面 这样 项目中所有的组件都可以使用路由模块中提供了组件或API了。
有些浏览器不支持,有兼容性问题
:3000/news 好看 看上去像是一个后端路由
需要后端配合
<HashRouter> as <Router> 包在APP组件最外面 这样 项目中所有的组件都可以使用路由模块中提供了组件或API了。
兼容性更好
:3000/#/news
就是一个锚点,由浏览器解析
<Route>
设置路由的匹配规+路由的出口
<Route path="/home" component={对应的组件}></Route>
<Link>
在页面上设置跳转的链接
<Link to="/home>首页</Link> 点击时,浏览器的地址栏的url添加了/home
<NavLink>
在设置跳转的基础上,可以添加选中的样式。 activeClassNmae / activeStyle
<Switch>
项目中路由的规则非常多,使用Switch,只会匹配到满足条件的第1个规则
<Switch>
<Route path="" component=""></Route>
<Route path="" component=""></Route>
<Route path="" component=""></Route>
<Route path="" component=""></Route>
<Route path="" component=""></Route>
<Redirect></Redirect>
</Switch>
<Redirect>
实现重定向
<Prompt>
当用户离开当前页面时做出一些提示。
react-router-dom中提供的常用三大对象:
如果说我们使用了路由,每一个组件的props上面,就有三个东西:
lacation
match parmas 获取传递的参数
history
使用上面的知识点,可以完成:
1)基本的路由
2)嵌套的路由
3)动态路由
4)编程式路由 通过点击按钮 push replace go(-1)
5)重定向
6)404