React Router - 嵌套路由配置

已于 2024-07-30 10:57:00 修改
阅读量139 收藏 2
点赞数
文章标签： react.js 前端 前端框架
于 2024-07-30 10:55:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/140789057
版权

嵌套路由解释

什么是嵌套路由

在一级路由中又嵌套了其它路由，这种关系就叫做嵌套路由。嵌套在一级路由内的路由又称作二级路由。可以继续往下嵌套，例如三级路由。
在这里插入图片描述

嵌套路由配置

1）使用children属性配置路由嵌套关系。下面是官网的示例片段：

https://reactrouter.com/en/main/routers/create-browser-router#createbrowserrouter
在这里插入图片描述

2）使用<Outlet />组件配置二级路由渲染位置。下面是官网的示例片段：

https://reactrouter.com/en/main/components/outlet
在这里插入图片描述

示例

创建1个一级路由页面，2个二级路由页面

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

路由配置：配置嵌套路由

在这里插入图片描述

在一级路由组件中使用<Outlet />配置二级路由渲染位置

在这里插入图片描述

在浏览器中访问

在这里插入图片描述

点击切换到面板：
在这里插入图片描述

点击切换到关于：
在这里插入图片描述

听海边涛声
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React-router 嵌套路由传值(render和children)
Chad97的博客
04-16 7279
小栗子： 例如： 我们的路由格式如下: let router = [ { path: '/', component: Rhome, exact: true, }, { path: '/user', component: User, routes: [ //嵌套路由 ...
react-router v6嵌套路由简单案例
天渺(喵)工作室
03-13 1522
react-router V6版本路由用法和V5用法差距较大,接一个简单的使用案例 新版本组件也开始使用函数式组件+hooks "react-router-dom": "^6.2.1", 1.入口main import "./App.css"; import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; import Index from "./modules/index/Index"; import E.
深入ReactRouter：从快速上手到嵌套路由配置的全面指南
让技术为我所用
01-19 2500
本博客深入探讨了在React中使用React Router v6进行路由配置的关键概念。涵盖了路由的快速上手、抽象路由模块、导航、导航传参、嵌套路由、默认二级路由、404路由配置以及两种路由模式。通过这篇博客，读者能够全面了解React Router v6的用法，为构建灵活的React应用提供了实用的路由配置知识。
react-router-dom V6的配置使用
webfunny2020的博客
05-08 1409
最近在搭建PC项目的React框架，涉及到React Router，开发同学有时就需要去尝试点新的东西，在开发过程中才不会枯燥的，基于这个理念推动，就在搭建的时候用V6的版本开始了（虽然只是个新版本，也不算啥新东西）… V6的版本相对于V5,做了很多的优化，有书写方面的、路由的嵌套、路由配置化、鉴权方面等等，下面就简单的介绍下如何使用 一、关于书写方面 路由注册的时候由的Switch改为了Routes //V5版本 import {Route, Switch} from 'react-router-do
react-router v6嵌套路由重定向
百岁如流富贵冷灰的博客
09-08 891
这样配置有一个问题就是当我访问根目录的时候：localhost:1234/。这个时候只会展示Main组件内容，但是我想让他重定向到/feature-management，我配置了。最终的处理结果是：我仅仅把Main组件的path 从。嗯，有点小无语，研究了半天才发现。，然后就可以实现了。
React-路由 react-router-dom
廖若星辰-LTY
08-25 6475
React 路由 react-router-dom BrowserRouter Routes Route Link useNavigate useSearchParams useParams useRoutes 声明式导航 编程式导航 路由传参 默认路由 路由嵌套
react-router-dom v6 使用
热门推荐
weixin_44051815的博客
11-19 2万+
react-router-dom react-router-dom v6 整体体验相对于 v5 ，体验要好更多，最大的一个改变，就是曾经的 Route 不可嵌套，整个路由配置必须拆分成若干小块，除非通过 react-router-config 这种插件，才可以实现对整个路由的管理，然而现在，不需要任何插件就可实现对路由配置的管理。 官网地址: react-router 当前例子，根据分支对应例子：react-router-dom-v6-example v6 与 v5 的区别 当前环境 安装 npm
React-router6的路由表+嵌套路由详解
m0_56986233的博客
05-31 2843
React-router6路由表+嵌套路由详解
react-router-dom v6版本的详细配置与使用
qq_51721168的博客
07-20 1476
react-router-dom更新到v6也有一段时间了，今天抽时间学习了一下，下面是我的一些总结，
react-nested-route:使嵌套路由简单易用
05-17
通过NPM安装$ npm install --save react-nested-route通过纱线安装$ yarn add react-nested-route用法 import Router from 'react-nested-route'// make your routers< Router xss=removed xss=removed> ...
react-router-sample:使用嵌套路由React路由器示例
04-21
React路由器样本用嵌套路由来React路由器示例。用法yarnyarn dev执照麻省理工学院执照版权所有（c）2021 Alexander Zeitler 特此免费授予获得此软件和相关文档文件（“软件”）副本的任何人无限制地处理软件的权利，...
20 React react-router4.x中实现路由模块化、以及嵌套路由父子组件传值
03-01
总结来说，`react-router v4.x`提供了强大的路由管理和导航能力，通过路由模块化、嵌套路由以及父子组件间的通信，我们可以构建出结构清晰、易于维护的React应用。同时，利用高阶组件和保护路由的概念，我们可以...
react-relative-router:react-router的包装器，使在嵌套路由中导航更容易
04-24
React相对路由器react-router的包装器，用于在有界上下文中启用相对路由安装npm install @unibuddy/react-relative-router yarn add @unibuddy/react-relative-router 出口产品import { useRelativeRouter , ...
react-router-series:React Router学习系列
06-20
您可以只输入颜色，它将是父级的 100% 高度和宽度可能包括 NotFoundRoute 和 DefaultRoute（认为我可能适合这些） 嵌套嵌套路由在第 2 集的其中一条路线中构建更复杂的嵌套路线框架更多关于 RouteHandler ...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1263
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
react.16+
qq_47040462的博客
07-24 768
在vite脚手架中执行：注意：1、这里没有this，因为babel编译后开启了模式2、渲染的组件必须要大写开头（虚拟dom转为真实的dom）
【React】useState：状态更新规则详解
lph159的博客
07-24 1047
在 React 状态管理中，使用 useState 更新对象状态时，推荐使用展开运算符（spread operator）...。展开运算符可以将现有对象的所有属性展开到一个新对象中，确保状态的不可变性。通过这种方式更新状态，React 能够正确检测到状态变化并触发组件重新渲染。本文以一个示例代码详细说明了如何使用展开运算符来更新对象状态，强调了直接修改对象属性不会触发视图更新的错误方法，并介绍了正确的做法，即通过 setState 创建一个新对象来更新状态。这种方法不仅保持了代码的简洁性
react配置代理的3中方法
最新发布
小码的博客
07-25 319
create-react-app中内置http-proxy-middleware，只需要在src目录下新建setupProxy.js。2.使用http-proxy-middleware库。1.使用create-react-app的代理配置。根目录建文件craco.config.js。3.craco 扩展webpack配置。可以在项目根目录下的。
react router dom6嵌套路由使用详细
05-10
React Router是一个React的第三方库，它提供了一种在React应用程序中实现路由的方式。React Router DOM是React Router的一个扩展，它为React应用程序提供了一个DOM导航组件。 React Router DOM的嵌套路由是一种将多个路由组件嵌套在一起的技术。这使得我们可以在一个页面上使用多个路由，每个路由有自己的路径和组件。 下面是React Router DOM 6的嵌套路由使用详细步骤： 1. 安装React Router DOM 使用npm或yarn安装React Router DOM npm install react-router-dom 2. 创建父路由组件 在你的React组件中引入BrowserRouter和Route组件，BrowserRouter是一个Router组件的具体实现，它使用HTML5 history API来实现单页应用程序的路由。 import { BrowserRouter as Router, Route } from 'react-router-dom'; const App = () => { return ( <Router> <Route path="/" component={Home} /> </Router> ); } 3. 创建子路由组件 在父路由组件中，我们可以使用Route组件来定义子路由。使用嵌套路由的一个好处是可以将路由组件分解为更小的组件。在这里，我们将创建一个包含嵌套路由的组件。 import { Route } from 'react-router-dom'; const Profile = () => { return ( <div> <h2>Profile Page</h2> <Route path="/profile/info" component={Info} /> <Route path="/profile/settings" component={Settings} /> </div> ); } 4. 使用嵌套路由 在父路由组件中，我们可以在Route组件中使用嵌套路由。在这个例子中，我们将使用Profile组件作为子路由。 import { BrowserRouter as Router, Route } from 'react-router-dom'; const App = () => { return ( <Router> <Route path="/" component={Home} /> <Route path="/profile" component={Profile} /> </Router> ); } 5. 创建Link组件 在使用嵌套路由的过程中，我们需要创建Link组件来将路由链接到不同的页面。在这里，我们将创建一个Link组件来将路由链接到Profile组件。 import { Link } from 'react-router-dom'; const Home = () => { return ( <div> <h2>Home Page</h2> <Link to="/profile">Go to Profile</Link> </div> ); } 至此，我们已经完成了React Router DOM 6的嵌套路由的使用。在使用React Router DOM 6时，我们需要注意一些变化： - Route组件的component属性已经被替换为element属性，用来指定将要被渲染的React元素。 - Route组件的exact属性默认为true。 - 嵌套路由使用Route组件而不是Switch组件来处理路由匹配问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值