第十二章 React 路由配置，路由参数获取

news2024/11/16 0:25:11

一、专栏介绍 🐶🐶

欢迎加入本专栏！本专栏将引领您快速上手React，让我们一起放弃放弃的念头，开始学习之旅吧！我们将从搭建React项目开始，逐步深入讲解最核心的hooks，以及React路由、请求、组件封装以及UI（Ant Design）框架的使用。让我们一起掌握React，开启前端开发的全新篇章！

二、什么是路由 🐭🐭

在React中，路由是用于管理应用程序中不同页面之间的切换和导航的机制。它允许开发人员根据用户在应用程序中的行为，如点击链接或提交表单，来切换不同的组件或页面。最为常见的就是我们的导航菜单，点击菜单以后现实相对应的页面。

三、安装react-router-dom依赖 🐹🐹

npm install react-router-dom --save

react-router-dom是React的一个插件库，专门用来实现单页应用（SPA）的路由管理。它提供了一组组件和API，用于构建单页应用程序的导航和路由，例如链接、路由切换、参数传递等。

通过使用react-router-dom提供的组件和API，可以定义应用程序中的不同页面和路由。这包括定义路由的路径、组件和参数等。

通过使用react-router-dom提供的导航组件，如Link和NavLink，可以在应用程序中实现页面的切换和导航。当用户点击链接或提交表单时，路由会根据定义好的路由配置进行切换。

react-router-dom还提供了参数传递的功能。可以通过定义带有参数的路由，在页面之间传递数据或参数。例如，可以在一个路由中定义一个用户ID参数，然后在另一个路由中使用该参数来获取用户信息。

四、绘制布局 🐰🐰

通常在我们的后台管理系统中，最常用的布局是上下和左右两种方式。其中，上方或左侧为菜单，下方或右侧则对应显示相应的内容。以一种常见的布局为例，即上方为导航条，左侧为菜单，右侧则为显示内容的区域。这样的布局设计能够让用户更加直观地了解系统结构，方便快捷地找到所需的功能和信息。通过合理的布局设计，可以提高用户的使用效率和满意度。

4.1、创建layout 👇👇

分别创建src/layout/Layout.tsx和src/layout/Layout.scss的文件

Layout.tsx

import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import './Layout.scss';

const Layout: React.FC = () => {
  const navigate = useNavigate();

  const goRouter = (path: string) => {
    navigate(path);
  };

  return (
    <>
      <div className="ts-layout">
        <div className="ts-layout-top">这是导航条</div>
        <div className="ts-layout-bottom">
          <div className="ts-layout-menu">
            <button onClick={() => goRouter('/')}>首页1</button>
            <button onClick={() => goRouter('home2/007')}>首页2</button>
            <button onClick={() => goRouter('/home3?id=008')}>首页3</button>
          </div>
          <div className="ts-layout-content">
            <Outlet />
          </div>
        </div>
      </div>
    </>
  );
};

export default Layout;

Layout.scss

.ts-layout {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100%;

  .ts-layout-top {
    height: 40px;
    width: 100%;
    background: #ddd;
  }

  .ts-layout-bottom {
    height: calc(100% - 40px);
    width: inherit;
    display: flex;

    .ts-layout-menu {
      width: 120px;
      height: 100%;
      background: #bdbbbb;
      display: flex;
      flex-direction: column;
      align-items: center;

      button {
        width: 80%;
      }
    }

    .ts-layout-content {
      width: calc(100% - 120px);
      height: 100%;
      background: #818080;
    }
  }
}

文件目录为

4.2、创建页面 👇👇

分别创建以下三个页面

Home.tsx

import React from 'react';

const Home: React.FC = () => {
  return (
    <>
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '45px',
        }}
      >
        这里是首页Home，路由/
      </div>
    </>
  );
};

export default Home;

 Home2.tsx

import React from 'react';
import { useParams } from 'react-router-dom';

const Home2: React.FC = () => {
  const { id } = useParams();

  return (
    <>
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '45px',
        }}
      >
        这里是首页Home2，路由是home2,参数的id为{id}
      </div>
    </>
  );
};

export default Home2;

 Home3.tsx

import React from 'react';
import { useSearchParams } from 'react-router-dom';

const Home3: React.FC = () => {
  const [searchParams] = useSearchParams();

  const paramsId = searchParams.get('id');

  return (
    <>
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '45px',
        }}
      >
        这里是首页Home3，路由是Home3,路由的参数为{paramsId}
      </div>
    </>
  );
};

export default Home3;

4.3、创建router 👇👇

新建文件src/router/index.tsx

import { createBrowserRouter } from 'react-router-dom';
import Layout from '../layout/Layout';
import Home from '../pages/home/Home';
import Home2 from '../pages/home/Home2';
import Home3 from '../pages/home/Home3';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: '/',
        element: <Home />,
      },
      {
        path: 'home2/:id',
        element: <Home2 />,
      },
      {
        path: 'home3',
        element: <Home3 />,
      },
    ],
  },
]);

export default router;

4.4、修改App.tsx 👇👇

import React from 'react';
import { RouterProvider } from 'react-router-dom';
import router from './router';
import './global.scss';

function App() {
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

五、效果 🐺🐺

六、配置404页面 🐸🐸

修改路由配置，在最后一个404页面的配置，因为我这里是demo，所有直接写了一个div，自己去扩展成组件，实现更丰富更酷炫直观的页面填充进去就可以了。

import { createBrowserRouter } from 'react-router-dom';
import Layout from '../layout/Layout';
import Home from '../pages/home/Home';
import Home2 from '../pages/home/Home2';
import Home3 from '../pages/home/Home3';
import Login from '../pages/Login';

const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: '/',
        element: <Home />,
      },
      {
        path: 'home2/:id',
        element: <Home2 />,
      },
      {
        path: 'home3',
        element: <Home3 />,
      },
    ],
  },
  {
    path: '*',
    element: <Layout />,
    children: [
      {
        path: '*',
        element: <div>404，您访问的页面不存在</div>,
      },
    ],
  },
]);

export default router;

七、总结 🐯🐯

react-router-dom是React中非常重要的一个路由管理库，对于开发React应用程序来说是很有必要学习的。

在React中，react-router-dom可以帮助我们实现页面间的跳转和导航，使得单页应用能够实现多页应用类似的切换效果。通过使用react-router-dom，我们可以定义应用程序中的不同页面和路由，并在用户进行页面跳转或导航时，控制组件的渲染和数据的传递。

学习react-router-dom可以帮助我们更好地理解和掌握React应用程序的开发和导航管理，提高开发效率和代码可维护性。特别是在构建大型复杂的单页应用程序时，路由管理的重要性更加突出。因此，对于想要深入开发React应用程序的开发者来说，学习和掌握react-router-dom是非常必要的。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1310370.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

模型放置到3D场景中后模型位置与鼠标选中的位置不一致怎么办？

模型放置到3D场景中后模型位置与鼠标选中的位置不一致怎么办？

在线工具推荐&#xff1a;3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 1、问题 从事3D建模相关工作的朋友们在工作中经常会遇到以下几种问题&#…
阅读更多...
网络协议疑点记录

网络协议疑点记录

1.RIP, OSPF，BGP 搞清RIP和OSPF的区别，这是我见过最好的总结！ - 知乎 首先什么是自治系统:治系统就是几个路由器组成了一个小团体 ?，小团体内部使用专用的协议进行通信，而小团体和小团体之间也使用专用的协议进行通信。 IGP RIP 距离矢量路由算法,bellman-ford算法，…
阅读更多...
浏览器js中添加日志断点

浏览器js中添加日志断点

一、需求 本地调试时&#xff0c;可以直接代码里使用console.log直接调试&#xff1b; 代码已更新到服务器&#xff0c;不想要提交代码&#xff0c;如何通过添加console.log调试呢 二、实现 使用浏览器添加日志断点的方式&#xff0c;当然vue这种打包的不可行哦 设置完成后…
阅读更多...
基于人气与协同过滤的图书推荐系统研究与实践（文末送书）

基于人气与协同过滤的图书推荐系统研究与实践（文末送书）

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…
阅读更多...
＜蓝桥杯软件赛＞零基础备赛20周--第10周--二分

＜蓝桥杯软件赛＞零基础备赛20周--第10周--二分

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…
阅读更多...
loadrunner脚本--参数化03(ODBC连接测试mysql)

loadrunner脚本--参数化03(ODBC连接测试mysql)

loadrunner脚本–参数化03(ODBC连接测试mysql) 文章目录 loadrunner12.55中&#xff0c;想用ODBC连接mysql数据库进行参数化时&#xff0c;参数列表里面没有data wizard数据向导&#xff0c;而是变成了import paramete&#xff0c;求告知data wizard数据向导去哪里了原因参数数…
阅读更多...
win10输入法设置方法，打造高效输入体验

win10输入法设置方法，打造高效输入体验

win10作为一款强大的操作系统&#xff0c;注重用户体验的个性化设置。输入法作为我们与电脑互动的桥梁之一&#xff0c;其设置显得尤为重要。本文将深入介绍win10输入法设置的三种方法&#xff0c;让您轻松打造符合个性需求的输入环境。 方法1&#xff1a;通过系统设置更改输入…
阅读更多...
安装DevEco Studio

安装DevEco Studio

下载 首先进入鸿蒙开发者官网&#xff0c;顶部导航栏选择开发->DevEco Studio 根据操作系统下载不同版本&#xff0c;其中Mac(X86)为英特尔芯片&#xff0c;Mac(ARM)为M芯片。 安装 下载完毕后&#xff0c;开始安装。 点击Agree 首次使用&#xff0c;请选择Do not impor…
阅读更多...
Leetcode—2697.字典序最小回文串【简单】

Leetcode—2697.字典序最小回文串【简单】

2023每日刷题&#xff08;五十八&#xff09; Leetcode—2697.字典序最小回文串 实现代码 char * makeSmallestPalindrome(char * s){int len strlen(s);int left 0, right len - 1;while(left < len / 2) {if(s[left] > s[right]) {s[left] s[right];} else {s[ri…
阅读更多...
linux系统下文件操作常用的命令有哪些？

linux系统下文件操作常用的命令有哪些？

面试官&#xff1a;说说 linux系统下 文件操作常用的命令有哪些&#xff1f; 一、是什么 Linux 是一个开源的操作系统&#xff08;OS&#xff09;&#xff0c;是一系列Linux内核基础上开发的操作系统的总称&#xff08;常见的有Ubuntu、centos&#xff09; 系统通常会包含以下…
阅读更多...
Linux---创建、删除文件及目录命令

Linux---创建、删除文件及目录命令

1. 创建、删除文件及目录命令的使用 命令说明touch 文件名创建指定文件mkdir 目录名创建目录(文件夹)rm 文件名或者目录名删除指定文件或者目录rmdir 目录名删除空目录 touch命令效果图: mkdir命令效果图: rm命令效果图: rm删除目录效果图 说明: rm命令想要删除目录需要加上…
阅读更多...
C++初阶（十六）优先级队列

C++初阶（十六）优先级队列

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、priority_queue的介绍和使用1、priority_queue的介绍2、priority_queue的使用 二、priori…
阅读更多...
Linux---查看目录命令

Linux---查看目录命令

1. 查看目录命令的使用 命令说明ls查看当前目录信息tree以树状方式显示目录信息 ls命令效果图: tree命令效果图: 2. 查看当前目录路径 命令说明pwd查看当前目录路径 pwd命令效果图: 3. 清除终端内容 命令说明clear清除终端内容 pwd命令效果图: 4. 总结 ls和tree是我们…
阅读更多...
20231214使用WPS将英文SRT字幕的全大写字符转换为首字母大写的小写字幕

20231214使用WPS将英文SRT字幕的全大写字符转换为首字母大写的小写字幕

20231214使用WPS将英文SRT字幕的全大写字符转换为首字母大写的小写字幕 2023/12/14 13:16 看英文纪录片&#xff0c;发现英文字母是全部大写。 所以需要整理成为小写的字幕【句子的首字符大小&#xff01;】 https://re.talking.1080p.hdtv.x265.aac.mvgroup.org/index.php?t…
阅读更多...
简单实现Spring容器(五) 实现bean后置处理器BeanPostProcessor机制

简单实现Spring容器(五) 实现bean后置处理器BeanPostProcessor机制

阶段5: // 1.编写自己的Spring容器,实现扫描包,得到bean的class对象. // 2.扫描将 bean 信息封装到 BeanDefinition对象,并放入到Map. // 3.初始化单例池并完成getBean() createBean()方法 // 4.完成依赖注入(如果创建某个Bean对象,存在依赖注入,需要进行bean组装操作) 5.bean…
阅读更多...
Vue3+Ts项目（Naive UI组件）——创建有图标可伸缩的左边菜单栏

Vue3+Ts项目（Naive UI组件）——创建有图标可伸缩的左边菜单栏

文章目录 安装、配置vue-router1、安装2、main.ts配置3、在App.vue中&#xff0c;渲染路由配置到的组件 创建测试路径页面1、src\views\dashboard\index.vue2、src\views\dashboard\test.vue3、src\views\table\index.vue 配置页面路由1、src\router\modules\dashboard.ts2、sr…
阅读更多...
2023年【北京市安全员-B证】考试及北京市安全员-B证复审考试

2023年【北京市安全员-B证】考试及北京市安全员-B证复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 北京市安全员-B证考试参考答案及北京市安全员-B证考试试题解析是安全生产模拟考试一点通题库老师及北京市安全员-B证操作证已考过的学员汇总&#xff0c;相对有效帮助北京市安全员-B证复审考试学员顺利通过考试。 1、…
阅读更多...
C语言中变量的存储类别

C语言中变量的存储类别

阅读更多...
PyCharm连接远程服务器上Docker容器，使用远程服务器的python intercepter解释器和GPU资源 [本地调试深度学习代码]

PyCharm连接远程服务器上Docker容器，使用远程服务器的python intercepter解释器和GPU资源 [本地调试深度学习代码]

概述 在编写常规深度学习代码时&#xff0c;总是需要使用服务器上的GPU资源&#xff0c;所以一般要写完代码&#xff0c;放到服务器&#xff0c;然后使用GPU运行。但是由于之前的习惯&#xff0c;总想本地调试一下或者本地直接跑测试结果&#xff0c;再放到服务器去跑。 网上…
阅读更多...
格式工厂功能详解！！

格式工厂功能详解！！

格式工厂&#xff08;Format Factory&#xff09;是由上海格诗网络科技有限公司创立于2008年2月&#xff0c;是面向全球用户的互联网软件。 下载地址https://www.onlinedown.net/soft/64717.htm&#xff1a; 该软件的主打产品“格式工厂”发展以来&#xff0c;已经成为全球领…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023