React--------路由

---

1.路由基本使用

 目标：能够使用 react 路由切换页面

 步骤：1.安装 （npm i react-router-dom@5.3.0）

            2.导入路由的三个核心组件：Router ; Route ; Link

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

            4.使用 Link 组件作为导航菜单（路由入口,点击跳转）

            5.使用 Route 组件配置路由规则和要展示的组件（路由出口，渲染组件的位置）

import {
  BrowserRouter as Router,
  HashRouter,
  Route,
  Link,
} from "react-router-dom";
import "./App.css";

import Home from "./pages/home";
import About from "./pages/about";
import Contact from "./pages/contact";
import { useEffect } from "react";

function App() {
  useEffect(() => {});
  return (
    // <Router>
    <HashRouter>
      <div className="app">
        {/* 路由访问 */}
        <ul>
          <li>
            {/*
              to属性：浏览器地址栏中的pathname（location.pathname）
            */}
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/about">关于我们</Link>
          </li>
          <li>
            <Link to="/contact">联系我们</Link>
          </li>
        </ul>
        {/* 配置路由规则 */}
        <div className="box">
          {/*
          path属性：路由规则
          component属性：展示的组件
          Route 组件写在哪，渲染出来的组件就展示在哪
        */}
          <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </div>
      </div>
    </HashRouter>
    // </Router>
  );
}

export default App;

  遇到问题：点击link无法跳转

  解决：index.js中的 <React.StrictMode> </React.StrictMode> 严格模式注释

import {

  BrowserRouter ，------------------history 不加#

  HashRouter,----------------------哈希 加#

  Route,-------------------- 路由渲染出口

  Link,---------------------- 点击进行路由跳转

} from "react-router-dom";

---

2.Route 路由用法（用来配置路由规则）

•   1.path 属性，指定路由规则
•   2.component 属性，指定要渲染的组件
•   3.children 子节点，指定要渲染的组件

// 用法一：使用 component 属性指定要渲染的组件
<Route path="/search" component={Search} />

// 用法二：使用 children 指定要渲染的组件
<Route path="/search">
    <Search />
</Route>

注意：对于 Route 来说，如果路由规则匹配成功，那么，就会渲染对应组件；否则，渲染 null 或者说不渲染任何内容

对于 Route 组件来说，path 属性是可选的：

• * 如果 Route 组件没有 path 属性，表示：该路由永远匹配成功，一定会渲染该组件

<Route>
    <SomeComponent />
</Route>

---

3.link 组件用法

目标：使用 Link 组件实现路由跳转 

Link 组件：用于指定导航链接，会渲染成 a 标签 ；to 属性，将来会渲染成 a 标签的 href 属性

<Link to="/first">页面一</Link>

// 渲染为：
<a href="/first">页面一</a>

---

4.路由匹配模式

 1.模糊匹配（默认情况下）

    * 默认情况下，React 路由是**模糊匹配**模式

    * 模糊匹配规则：只要 pathname（浏览器地址栏中的地址） 以 path 开头就会匹配成功

<Link to="/login">登录页面</Link> // 匹配成功
<Route path="/" component={Home} /> // 匹配成功

path	能够匹配的pathname（浏览器地址栏）
/	所有的pathname
/first	/first 或 /first/a 或 /first/a/b.....;    /firsra不可以

2.精确匹配

  * 问题：默认路由任何情况下都会展示，如何避免这种问题

  * 给Route 组件添加 exact 属性，让其变为精确匹配模式

  * 精确匹配：只有当path 和 pathname 完全匹配时才会展示该路由

// 此时，该组件只能匹配 pathname=“/” 这一种情况 
<Route exact path="/" component=... />

  推荐：给默认路由（'/'）添加 exact 属性

---

5.路由的执行过程

    1.点击 Link 组件（a 标签），修改了浏览器地址栏中的url

    2.React 路由监听到地址栏 url 的变化

    3.React 路由内部遍历所有 Route 组件，使用路由规则（path）进行匹配

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

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

---

6.Redirect 重定向组件

1.引入Redirect 组件 （import {  Redirect } from "react-router-dom"）

2.使用

 {/* path 为空的时候，重定向到 /home页 */}
  <Redirect from="/" to="/home" />

---

7.Switch组件和404页面

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

   * 在实际开发时，通常会用 `Switch` 组件包裹 `Route` 组件
   * 通过 `Switch` 组件非常容易的就能实现 404 页面功能： 

<Switch>
  <Route exact path="/">
      <Home />
  </Route>
  <Route path="/about">
      <About />
  </Route>
  <Route path="/user">
      <User />
  </Route>
  // 即使这个也可以匹配成功 /user/a 但是因为 Switch 组件的存在，这个路由对应的组件内容是不会渲染的
  <Route path="/user/a">
      <User1 />
  </Route>

    {/* 以上路由规则全都不匹配时，展示 404 页面 */}
  {/* 注意：这个路由需要放在最后，兜底 */}
  <Route>
      <NoMatch />
  </Route>
</Switch>

 demo时遇到问题：Route 所有的组件都没有渲染出来

                    解决：Switch 组件不能包裹 Redirect组件

---

8.编程式导航

编程式导航：使用js代码实现页面跳转

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

1. * `history.push(path:string | {pathname:string, state:object})`
2. * `history.replace(path:string | {pathname:string, state:object})` 

页面跳转，并传递参数

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

function Login() {
  const history = useHistory();
  console.log("history", history);
  const login = () => {
    history.push({ pathname: "/home", state: { a: 10000 } });
  };
  return (
    <div>
      <h1>Login</h1>
      <button onClick={login}>dd</button>
    </div>
  );
}
export default Login;

跳转后的页面，接收参数（useLocation）

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

function Home() {
  const location = useLocation();
  console.log("接收参数", location);
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}
export default Home;