【React】React-router的使用记录

1. 前言

官方文档地址：https://reactrouter.com/web/guides/quick-start

2. 高阶组件

先说一下高阶组件的意思，一个函数接受一个组件作为参数返回一个新的组件

功能性的封装减少重复代码

一般被高阶组件处理过的组件获取数据都从props获取

3. Router

Router就是路由器，里面包含若干个Route（路由）

常用的Router有两个：

1、<BrowserRouter>

2、<HashRouter>

BrowserRouter即在浏览器地址栏中不显示#，而是以传统的URI显示

而HashRouter就是以#为间隔符，显示URI

前者相比于后者利于SEO

4. Route

Route包含在Router中，但更多情况下，我们直接都是把Router放在“根”上，也即App上：

import React from "react";
import ReactDom from "react-dom";
import App from "./pages/App";
import {BrowserRouter as Router} from "react-router-dom"

ReactDom.render(
    <Router>
        <App/>
    </Router>
    , document.getElementById("root"));

这样，在其他组件内，就不用让Router包裹Route了

那么如何使用Route呢？

Route有两个特别重要的属性：path和component

<Route path="/hello" component={Nav1}/>
<Route path="/world" component={Nav2}/>

这样，当匹配到/hello时，就会显示Nav1组件的内容

当然，这样是默认继续匹配的，什么意思呢？当匹配到/hello时，如果还有/hello/hello路径的话，也会继续匹配

解决办法也很简单，使用Swtich组件即可

也即，在Route上再包一层Switch

<Switch>
    <Route path="/hello" component={Nav1}/>
    <Route path="/world" component={Nav2}/>
</Switch>

官网对于Switch时这样介绍的：

Renders the first child <Route> or <Redirect> that matches the location.

嵌套路由

在路由里套路由所有的组件你都可以使用使用 Link Switch ..

嵌套路由的上一级千万不能加exact匹配

<Route path='/singer' render={()=>{
  <Route xxx={xxx}></Route>
  <Route xxx={xxx}></Route>
}}></Route>

5. Link

说完基本的路由后，需要认识“导航链接”

基本理解就是通过导航链接跳转到相应路由，毕竟你不会让用户自行在浏览器地址上输入相应的URI吧？

简单理解，就是一个a标签罢了！

<Link to="/hello">导航1</NavLink>
<Link to="/world">导航2</NavLink>

有一个基本属性，就是to，也即要导航到的路径

NavLink

Link已经足够用了，但是一般导航我们都有一个激活class，但该导航激活后，会有个高亮的效果，那么如何实现呢？

一般情形下，如果使用NavLink的话，会自动添加一个名为active的class，如果要自定义，那么给NavLink添加要给属性即可：activeClassName

<NavLink to="/hello">导航1</NavLink>
<NavLink to="/world">导航2</NavLink>

传递隐形参数

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

其中state就是你要隐形传递的数据，这里的数据时不会显示在地址栏或者哪里的

replace

<Link
  replace={true}
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

代表不留下历史记录

6. Param

路由传参

在路径上加上:参数名即可，如果可空，那么使用:参数名?

如：

<NavLink to="/hello/:id?">导航1</NavLink>
<NavLink to="/world/:id">导航2</NavLink>

7. NotFound

如果未找到页面，返回404，如何做？

在所有Route后面再加上一个Route，返回一个404组件即可，但是，注意：

需要使用Switch来包裹，或者每个Route都是用exact属性，来使精准匹配URL