React-Router 要点

react-router

路由模式设置：在最顶层的index.js 设置

hash模式：

histroy模式:
Route
- path：当前路由要匹配的规则
  1. 默认情况下，Route做模糊匹配，即url以当前path为开始时就匹配成功
  2. exact 精确匹配，当 url===path或者url===path/才会匹配成功
  3. strict 严格匹配，当 url===path时才会匹配成功，必须在有exact精确匹配的情况下才能实现
  4. 多路径匹配:将多个url 以数组形式传入Route
  5. 动态路由
```
      {/* <Route path={["/list","/list/:type","/list/:type/:page"]} exact component={ListView} /> */}
      {/* <Route path="/list/:type?/:page?" exact component={ListView} /> */}
      <Route path="/list/:type?/:page?" exact component={List} />
```
    - component 要接收规则匹配成功，要跳转到的视图，也可通过函数传递路由参数到视图组件
    - render可以通过函数传递路由参数到视图组件，可以用于类组件
```
      <Route path={["/","/index","/home"]} exact render={(props)=>{ // 多路径匹配
        return <HomeView 
            user={user}
            {...props}
        /> 
      }} />
      <Route path="/about" exact  component={AboutView} />
```

Link

to: 跳转到url页面
和a标签的不同：Link内部做了跳转拦截，是单页面视图，而a标签会重新请求服务器，刷新浏览器
Link适合跳转到应用内的url，a标签跳转到应用外的url。

import { Link } from "react-router-dom";

function Nav() {
  return <nav>
    <Link to="/">首页</Link>
    <span> | </span>
    <Link to="/about">关于</Link>
    <span> | </span>
    <Link to="/join">加入</Link>
    <span> | </span>
    {/* <a href="/home">首页-2</a>
    <span> | </span> */}
    {/* <Link to="https://www.baidu.com">百度</Link> */}
    <a href="https://www.baidu.com">百度</a>
  </nav>
}

export default Nav;

NavLink

NavLink与Link类似，都可以跳转到to指定的路径。但是NavLink默认会给选中的a标签添加class="active"，可以重新给className赋值来修改class

默认是模糊匹配
如果要实现精确匹配，添加exact
修改activeStyle来修改当前a标签内容 style

import { NavLink } from "react-router-dom";

function Nav() {
  return (
    <nav className="nav">
      <NavLink
        to="/"
        exact
        activeClassName="root-active"
        activeStyle={{ fontWeight: "bold" }}
        isActive={(match,{pathname})=>{
          // console.log(match,location);
        return pathname==="/"||pathname==="/home"||pathname==="/index"
        }}
      >
        首页
      </NavLink>
      <span> | </span>
      <NavLink to="/about">关于</NavLink>
      <span> | </span>
      <NavLink to="/join">加入</NavLink>
      <span> | </span>
      <NavLink to="/list">列表</NavLink>
    </nav>
  );
}

路由参数
- history：
  - action：
    1. PUSH：用户通过Link或者NavLink组件进入，或者通过history.push进入
    2. POP：用户通过直接在地址栏中输入url进入，！！！：不存在history.pop()方法
    3. REPLACE：重定向进入或者通过history.replace进入。 ！！！：只会替换history中的内容，不会增加history的长度
  - length：当前源在历史记录中，存储的条目数，也就是history数组的长度
  - go:go(n),负值向后跳转几个目录，正值向前跳转n条
  - goBack：goBack() 返回到历史记录上一步
  - goForward: goForward() 前进到历史记录下一步
- location
  - hash: "" url 中的 hash 值
  - pathname: "" 当前的url
  - search: "" 当前的 search
  - state: push 或 repalce 传递过来的信息
- match
  - params -（对象）从与路径的动态段相对应的URL解析的键/值对
  - isExact-（布尔值）当前 route 是否是精确匹配
  - path-（字符串）当前的 path
  - url-（字符串）url 中被path匹配到的部分

Switch

Switch 组件匹配第一个符合规则的url：要将匹配的url设置为精确匹配，才能实现所有不匹配的url都跳转到404页面

      <Switch>
        <Route
          path={["/", "/index", "/home"]}
          exact
          component={HomeView}
        />
        <Route path="/about" exact strict component={AboutView} />
        <Route path="/about/details"   component={AboutDetails} />
        <Route path="/join" exact component={JoinView} />
        <Route path={"/list/:type?/:page?"} exact component={List} />

        <Route path="/404" exact component={UndefindedView} />
        <Redirect to="/404" />
      </Switch>

Redirect

重定向到指定路径。即跳转到Route指定path时，修改地址栏url。

        <Route path="/404" exact component={UndefindedView} />
        <Redirect to="/404" />

hooks
- useHistory(): 获取history信息
- useLocation()：获取location信息
- useParams() === match.params
- useRouteMatch()