第41节——页面中使用路由

一、页面中进行路由跳转

1、普通跳转

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

export default function APage() {
  /**
   * 使用useNavigate钩子返回一个方法
   * 使用这个方法进行跳转
   */
  const navigate = useNavigate();

  const linlB = () => {
    // 直接跟我们定义的path
    navigate('/b')
  }

  return (
    

      
A页面
       linlB()}>跳转到B页面
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、替换当前页面

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

export default function APage() {
  /**
   * 使用useNavigate钩子返回一个方法
   * 使用这个方法进行跳转
   */
  const navigate = useNavigate();

  const replaceB = () => {
    // 直接跟我们定义的path
    navigate('/b', { replace: true })
  }

  return (
    

      
A页面
       replaceB()}>把当前页面替换成B页面
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3、前进或后退到浏览器历史记录中的特定页面

function MyComponent() {
  const navigate = useNavigate();

  function handleBack() {
    // 后退几页
    navigate(-1);
  }

  function handleForward() {
    // 前进几页
    navigate(1);
  }

  return (
    

      Back
      Forward
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、路由传参

1. 路由参数（params形式）

路由参数是将参数嵌入到 URL 中的一种方式。在 React Router 6 中，我们可以通过在路由路径中使用冒号来定义参数

定义

} />
1

获取

我们定义了一个名为 id 的参数，它可以在 URL 中的 /:id 部分找到。当用户访问 /users/123 时，123 将成为路由参数，并可以在组件中通过 useParams 钩子函数访问

function UserDetails() {
  const { id } = useParams();
  // ...
}
1
2
3
4

2、查询参数（search形式）

查询参数是在 URL 中使用问号传递的一种参数。在 React Router 6 中，我们可以通过在 URL 中添加查询参数来传递参数

定义

User Details
1

获取

我们向 /users 页面传递了一个名为 id 的查询参数，并将其设置为 123。我们可以在组件中使用 useLocation 钩子函数获取当前 URL 中的查询参数，并使用 URLSearchParams 对象来解析它们

function UserDetails() {
  const [searchParams] = useSearchParams();
  // 使用URLSearchParams这个对象解析url的search，然后直接获取id
  const id = searchParams.get('id');
  // ...
}
1
2
3
4
5
6

3. 状态对象

状态对象是一种可以在导航期间传递数据的机制。在 React Router 6 中，我们可以在 navigate 函数中使用第二个参数来传递状态对象

定义

function handleClick() {
  navigate('/users', { state: { id: 123 } });
}
1
2
3

获取

我们在导航到 /users 页面时传递了一个名为 id 的状态对象。我们可以在组件中使用 useLocation 钩子函数获取当前 URL 中的状态对象

function UserDetails() {
  const location = useLocation();
  const { id } = location.state;
  // ...
}
1
2
3
4
5

注意

使用状态对象传递数据会将数据存储在浏览器的会话历史中，因此它仅适用于页面之间的相邻导航。如果用户从当前页面返回到其他页面，状态对象中的数据将被清除。如果需要在不同页面之间共享数据，最好使用其他的数据传递方式，如 Redux 或 Context API

三、嵌套路由

点击顶栏导航按钮。页面跳转。导航栏保持不变。页面改变

1、使用Outlet实现

routerComponent.jsx定义

/**
 * 从react-router-dom中 引用HashRouter 是一个组件
 * 如果需要别的模式那就引入其他模式
 *
 */
import React from "react";
import { HashRouter, Route, Routes } from "react-router-dom";
import APage from "./learn-router/a";
import BPage from "./learn-router/b";
import CPage from "./learn-router/c";
import DPage from "./learn-router/d";

export default function RouterComponent() {
  return (
    // 首先确定什么模式，那么最上层组件就是用这个模式
    
      
        }>
          {/* 
            嵌套路由子路由必须包含父级路由的path
            🤔一下为什么
          */}
          }>
          }>
          }>
        
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

页面中使用

// 直接使用Outlet组件 或者 使用useOutlet都可以
import { Link, Outlet } from "react-router-dom";

export default function DPage() {
  return (
    

      

        A页面
        b页面
        c页面
      
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、直接在页面中定义

routerComponent.jsx定义

/**
 * 从react-router-dom中 引用HashRouter 是一个组件
 * 如果需要别的模式那就引入其他模式
 *
 */
import React from "react";
import { HashRouter, Route, Routes } from "react-router-dom";
import APage from "./learn-router/a";
import BPage from "./learn-router/b";
import CPage from "./learn-router/c";
import DPage from "./learn-router/d";

export default function RouterComponent() {
  return (
    // 首先确定什么模式，那么最上层组件就是用这个模式
    
      
        {/* 
          path后面加上/*
        */}
        }>
        
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

页面中使用

// 直接使用Outlet组件 或者 使用useOutlet都可以
import { Link, Routes, Route } from "react-router-dom";
import APage from "./a";
import BPage from "./b";
import CPage from "./c";

export default function DPage() {
  return (
    

      

        {/* 
          注意：跳转的时候必须要加上父级路由的path
        */}
        A页面
        b页面
        c页面
      
      
        {/* 
          我们再定义子路由的path的时候不需要加父组件的path
        */}
        }>
        }>
        }>
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28