11-04-react路由基础
路由
简介
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
一些组件：
在我们使用路由时，默认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错误，直接重定向到某个路由下：
withRouter
高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.
import {withRouter} from 'react-router-dom'
路由小结
react-router-dom中提供的常用组件：
as 包在APP组件最外面 这样 项目中所有的组件都可以使用路由模块中提供了组件或API了。
有些浏览器不支持，有兼容性问题
:3000/news 好看 看上去像是一个后端路由
需要后端配合
as 包在APP组件最外面 这样 项目中所有的组件都可以使用路由模块中提供了组件或API了。
兼容性更好
:3000/#/news
就是一个锚点，由浏览器解析
设置路由的匹配规+路由的出口
实现重定向
当用户离开当前页面时做出一些提示。
react-router-dom中提供的常用三大对象：
如果说我们使用了路由，每一个组件的props上面，就有三个东西：
lacation
match parmas 获取传递的参数
history
使用上面的知识点，可以完成：
1）基本的路由
2）嵌套的路由
3）动态路由
4）编程式路由 通过点击按钮 push replace go(-1)
5）重定向
6）404