一、如何找到文档
在 GitHub 上直接搜索 react-router 进入，就能找到开发文档，
这里可以提供下，链接：https://reacttraining.com/react-router/
现在路由都是使用 react-router-dom 了。
二、路由容器
这个和以前 3.0 版本的路由配置不一样了，现在路由对应两种模式提供两个路由容器。
- hashhistory
import { HashRouter as Router } from "react-router-dom";
- browerhistory
import { BrowserRouter as Router } from "react-router-dom";
Vue 就一个路由容器
三、如何放置路由
react-router-dom 书写的路由方式是声明式，可以说是非常的难用，所以一般都是封装成类似 vue-router 路由书写方式。
路由书写优先级为 component > render > children
四、路由跳转和传参
类似 Vue 中的 this.$router，react 路由参数主要包含四部分：
- history里面有push
- location 有query（search）和params（state）
location内容
{
hash: ""
pathname: "/about"
search: ""
state: {id: 10}
}
- match配置路由路径
- staticContext
路由跳转的两种方式：
- 声明式
关于
关于
关于
比较特殊的还有一个 NavLink 导航链接，不同于 Link ，NavLink 可以增加样式。常用于单页面左侧导航。
About
About
元素处于活动状态时应用于元素的样式， 可以行内也可以类名添加活动样式。
- 编程式
push方法，两种配置方式能够 push ，一种是
另一种是通过，history 模块，或者是 useHistory 钩子。
五、重定向
新位置将覆盖历史记录堆栈中的当前位置，就像服务器端重定向（HTTP 3xx）一样。
import { Redirect } from "react-router-dom";
六、如何在任意组件找到 Vue this 上的路由对象
Vue 2.0 的路由是绑定在 this 的身上，React 路由只会出现在 和
- history
注意⚠️这个 history 不是浏览器原生的。
import { createBrowserHistory , createHashHistory } from "history";
const customHistory = createBrowserHistory();
console.log(customHistory)
- withRouter
import { withRouter } from "react-router-dom";
function Main(props){
console.log(props)
return (
你好
)
}
const A = withRouter(Main);
/*A仍然作为组件使用*/
七、路由钩子
这个路由钩子不是路由守卫，React-router 脑残，在 4.0 把路由拦截给删了，这里出现的路由钩子完全是针对 react-hook而言的路由hooks。react 版本要求大于 16.8。
- useHistory
import { useHistory } from "react-router-dom";
const history = useHistory();
history.push({pathname:"/index"})
- useParams
useParams返回URL参数的键/值对的对象。使用它来访问match.params当前
组件有效，push 或 params 携带参数都不行。
- useLocation
该useLocation挂钩返回location代表当前URL 的对象。
重点：配合 useEffect 可作为局部组件守卫使用。
- useRouteMatch
八、回到顶部
:root{
scroll-behavior:smooth;
}
window.scrollTo(0,0);
九、路由精确匹配问题
react 路由默认是模糊匹配，例如：
} >
输入 index 三个路径都会匹配。路由添加 exact（精确）属性可以精确匹配。必须是路径和大小写一样。
还有一个组件是 switch ，组件内部采用模糊匹配，但是只会匹配一个路由。
} >
十、静态化路由
相信你也发现了，嵌套路由写起来麻烦维护起来也麻烦。就没有类似 vue-router 那样数组的写法吗。还真没有需要自己来实现。但是官方也维护一个未来版 react-router-config 。不过实在是太简陋了。
一个简单的用法示例：
相对 Vue-Router 来讲：
- 这个routes就相当于children
- {renderRoutes(this.props.route.routes)} 就相当于 router-view
class B extends React.Component {
constructor(props) {
super(props);
this.route = this.props.route;
}
render() {
return (
B
{renderRoutes(this.route.routes)}
)
}
}
class Root extends React.Component {
constructor(props) {
super(props);
this.route = this.props.route;
}
render() {
return (
我是Root组件
{renderRoutes(this.route.routes)}
我是Root组件
)
}
}
class Index extends React.Component {
constructor(props) {
super(props);
this.route = this.props.route;
}
render() {
return (
我是Index组件
{renderRoutes(this.props.route.routes,{ someProp: "these extra props are optional" })}
)
}
}
class Child extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
我是child组件
{renderRoutes(this.props.route.routes,{ someProp: "these extra props are optional" })}
我是child组件
)
}
}
const routes = [
{
component: Root,
routes: [
{
path: "/",
exact: true,
component: Index
},
{
path:"/B",
component:B,
routes: [
{
path: "/B/child",
component: Child
}
]
}
]
}
];
ReactDOM.render(
{renderRoutes(routes)}
,
document.getElementById('root')
);
十一、路由即组件
react-router < 4.0 的时候，路由可以嵌套使用，现在已经不支持了：
//App组件里面有this.props.children
用 Vue 的话讲就是：以前 this.props.children 是 router-view ，现在 Route 是 router-view
最后
还有一个知识点：PureComponent 和 Component 的区别？
PureComponent 只会在 state 和 props 不同才会更新。
参考：React 的 PureComponent Vs Component
当前时间 2020年5月5日 星期二 13:22:52