React路由react-router-dom

一、点击切换路由

import { useEffect, useState } from "react";
import CartFooter from "./components/GoodsItem";
import CartHeader from "./components/GoodsItem";
import GoodsItem from "./components/GoodsItem";

const Parent = () => {
  const [path, setPath] = useState("/header");
  useEffect(() => {
    console.log(window.location.hash.slice(1));
    const handleHashChange = () => {
      setPath(window.location.hash.slice(1))
    };
    // 给window绑定hashchange事件
    window.addEventListener("hashchange", handleHashChange);
    return () => {
      // 给window解绑
      window.removeEventListener("hashchange", handleHashChange);
    };
  }, [path]);
  return (
    <>
      <ul>
        <li>
          <a href="#/footer">尾部</a>
        </li>
        <li>
          <a href="#/header">头部</a>
        </li>
        <li>
          <a href="#/item">商品列表</a>
        </li>
      </ul>
      {path === "/footer" && <CartFooter>footer</CartFooter>}
      {path === "/header" && <CartHeader>hader</CartHeader>}
      {path === "/item" && <GoodsItem>item</GoodsItem>}
    </>
  );
};

export default Parent;

二、路由v5

1、yarn add react-router-dom@5.3.0

2、导入路由的三个核心组件Router/Route/Link

3、使用Router组件包裹整个应用

4、使用Link组件作为导航菜单（路由入口）

5、使用Route组件配置路由规则和要展示的组件（路由路口）

import { Route,Link,HashRouter as Router } from "react-router-dom"
import First from './components/GoodsItem'
const Parent=()=>{
  return (
    <Router>
      <ul>
        <Link to='/first'>第一个页面</Link>
      </ul>
      <Route path='/first' component={First}></Route>
    </Router>
  )
}
export default Parent

配置路由规则：通过path属性配置路由规则，通过component属性指定该路由规则匹配时要跳转的组件

指定渲染位置：Route组件写在哪，组件内容就展示在哪

三、Router的说明

1、Router组件：包裹整个应用，一个React应用只需要使用一次

2、两种常用Router：HashRouter和BrowserRouter

HashRouter：使用URL的哈希值实现。原理：监听window的hashchange事件来实现

BrowserRouter：使用H5的history.pushState()API来实现。原理：使用window的popstate事件来实现

四、Link组件的说明

1、用于指定导航链接，会渲染成a链接

2、除了Link组件，还提供了NavLink组件，可以在路由匹配时获得一个高亮类名，从而指定高亮效果

activeClass属性：用于指定高亮类名，默认active

exact属性：精确匹配

五、Route组件的说明

1、两种使用方法

（1）使用component属性指定要渲染的组件

<Route path='/first' component={First}></Route>

 （2）使用children指定要渲染的组件

<Route path='/first'><First></First></Route>

（3）使用render属性

Route的render属性：用来内联渲染任意内容

<Route path='/home' render={()=><div>home</div>}></Route>

2、pathname为/时，可以匹配任意路径

3、Route添加exact属性，表示只有在当前pathname完全一致时显示该组件

六、路由的执行过程

1、点击Link组件，修改了浏览器地址栏中的url

2、React路由监听到地址栏url的变化 hashchange popstate

3、React路由内部遍历所有Route组件，使用路由规则path与pathname进行匹配

4、当路由规则path能够匹配地址栏中的pathname时，就展示该Route组件中的内容

5、默认情况下：React路由可以同时匹配成功多个，只要匹配成功，该路由组件对应的内容就会渲染到页面中

七、Switch和404页面

switch组件：包裹Route组件，只会渲染第一个匹配的组件，即使有多个路由可以匹配成功

    <Router>
      <Link to="/">首页页面</Link><br />
      <Link to="/search">搜索页面</Link><br />
      <Link to="/my">我的页面</Link><br />
      <Switch>
        <Route exact path="/">
          <Dashboard></Dashboard>
        </Route>
        <Route path="/search">
          <Search></Search>
        </Route>
        <Route path="/my">
          <My></My>
        </Route>
        <Route>
          <NotFound></NotFound>
        </Route>
      </Switch>
    </Router>

八、编程式导航

目的：通过JS代码实现页面跳转

方法：通过使用useHistory hook来拿到路由提供的history对象，用于获取浏览器历史记录的相关信息。

（1）push

（2）replace跳转某个页面，会替换当前页面的浏览记录

（3）go

九、重定向

<Switch>
  <Route path="/login" component={Login}></Route>
  <Route path="/home" component={Layout}></Route>
  <Redirect path="/" to="/home" />
</Switch>