react-router > 4.0 路由

一、如何找到文档

在 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 就一个路由容器 <router-view />

三、如何放置路由

react-router-dom 书写的路由方式是声明式，可以说是非常的难用，所以一般都是封装成类似 vue-router 路由书写方式。

<Router>
    <div>
        <Route path="/" render={() => <Child component={App} />} ></Route>
        <Route path="/" component={A} ></Route>
        <Route path="/" children={()=><A/>} ></Route>
        children为函数时不管path匹不匹配都会显示组件，如果不是函数显示效果和component相同
    </div>
</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

路由跳转的两种方式：

声明式

<Link to="/about?user=CondorHero">关于</Link>
<Link to={{pathname:"/about",search:"CondorHero"}}>关于</Link>
<Link to={{pathname:"/about",state:{id:10}}}>关于</Link>

比较特殊的还有一个 NavLink 导航链接，不同于 Link ，NavLink 可以增加样式。常用于单页面左侧导航。

<NavLink to="/about" style={{fontWeight: "bold",color: "red"}}>About</NavLink>
<NavLink to="/about" activeClassName="className">About</NavLink>

元素处于活动状态时应用于元素的样式，可以行内也可以类名添加活动样式。

编程式

push方法，两种配置方式能够 push ，一种是 <Route></Route> 包裹的组件，通过 this.props.history.push

另一种是通过，history 模块，或者是 useHistory 钩子。

五、重定向

新位置将覆盖历史记录堆栈中的当前位置，就像服务器端重定向（HTTP 3xx）一样。

import { Redirect } from "react-router-dom";
<Redirect to="/somewhere/else" />
//用法和Link一样

六、如何在任意组件找到 Vue this 上的路由对象

Vue 2.0 的路由是绑定在 this 的身上，React 路由只会出现在和 <Route></Route> 绑定的组件内部，所以其他组件要想跳转路由并传参的话，两种办法。

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 (
    <div>
      <h1>你好</h1>
    </div>
  )
}

const A = withRouter(Main);

/*A仍然作为组件使用*/
<A></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当前<Route>，所以只对：

<Route path="/about/:slug" component={A} ></Route>

组件有效，push 或 params 携带参数都不行。

useLocation

该useLocation挂钩返回location代表当前URL 的对象。

重点：配合 useEffect 可作为局部组件守卫使用。

useRouteMatch

八、回到顶部

:root{
    scroll-behavior:smooth;
}
window.scrollTo(0,0);

九、路由精确匹配问题

react 路由默认是模糊匹配，例如：

<Route path="/" render={() => <B />} ></Route>
<Route path="/index" render={() => <index />} ></Route>
<Route path="/:user" render={() => <User />} ></Route>

输入 index 三个路径都会匹配。路由添加 exact（精确）属性可以精确匹配。必须是路径和大小写一样。

还有一个组件是 switch ，组件内部采用模糊匹配，但是只会匹配一个路由。

<Switch>
    <Route path="/" exact render={() => <B />} ></Route>
    <Route path="/index" render={() => <index />} ></Route>
    <Route path="/:user" render={() => <User />} ></Route>
</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 (
            <div>
                <h1>B</h1>

                {renderRoutes(this.route.routes)}
            </div>
        )
    }
}
class Root extends React.Component {
    constructor(props) {
        super(props);
        this.route = this.props.route;
    }
    render() {
        return (
            <div>
                <h1>我是Root组件</h1>
                {renderRoutes(this.route.routes)}
                <h1>我是Root组件</h1>
            </div>
        )
    }
}

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.route = this.props.route;
    }
    render() {
        return (
            <div>
                <h2>我是Index组件</h2>
                {renderRoutes(this.props.route.routes,{ someProp: "these extra props are optional" })}
            </div>
        )
    }
}
class Child extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <h3>我是child组件</h3>
                {renderRoutes(this.props.route.routes,{ someProp: "these extra props are optional" })}
                <h3>我是child组件</h3>
            </div>
        )
    }
}


const routes = [
    {
        component: Root,
        routes: [
            {
                path: "/",
                exact: true,
                component: Index
            },
            {
                path:"/B",
                component:B,
                routes: [
                    {
                        path: "/B/child",
                        component: Child
                    }
                ]
            }
        ]
    }
];




ReactDOM.render(
    <React.StrictMode>
        <Router>
            <div>
                {renderRoutes(routes)}
            </div>
        </Router>
    </React.StrictMode>,
    document.getElementById('root')
);

十一、路由即组件

react-router < 4.0 的时候，路由可以嵌套使用，现在已经不支持了：

<Router history={history}>
   <Route path="/" components={App}>//App组件里面有this.props.children
       <Route path="haha" component={Haha}></Route>
       <Route path="xixi" component={Xixi}></Route>
   </Route>
</Router>

用 Vue 的话讲就是：以前 this.props.children 是 router-view ，现在 Route 是 router-view

最后

还有一个知识点：PureComponent 和 Component 的区别？

PureComponent 只会在 state 和 props 不同才会更新。

参考：React 的 PureComponent Vs Component

当前时间 2020年5月5日星期二 13:22:52