react-router4中嵌套路由的写法

最新推荐文章于 2025-04-14 16:56:26 发布
最新推荐文章于 2025-04-14 16:56:26 发布
阅读量4.7k 收藏 2
点赞数 2
分类专栏： react 文章标签： rouact router 嵌套路由 路由 跳转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39963132/article/details/84859492
版权
本文介绍如何在React Router 4中实现嵌套路由。作者作为初学者，分享了从错误中学习的经验，指出在React Router 3中通过<Route>标签嵌套页面的方式在v4版本中不再适用。React Router 4推荐路由存在于布局和UI之间，通过组件内的this.props.children获取嵌套组件。文中提供了router/index.js和component/MyView.js的代码示例，展示v4版本的正确写法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

因为本人也是react的初学者，也是在一遍摸索着一边解决一些小的问题来分享出来，希望大家能共同交流。

接下来谈一谈react-router4中如何写嵌套路由。因为在前几篇博客里写了用react-router实现单页面跳转，但是没有测试嵌套路由，导致嵌套的部分无法实现正常跳转，现已改正，并来说一说它的来龙去脉。

前言：本人用的react-router是4.3.1的版本，可以从package.json中去查看项目安装引用的包。

1、react-router3中，页面的嵌套是通过<Route>标签的嵌套实现的。正如我最开始写的，利用Route标签实现MyView和Mydocument两个组件的嵌套。

但是上述的写法在v4版本下运行时，地址栏中的url会改变，但是组件不会显示出来。

2、所以需要将上述写法改成v4，React Router 4 不再提倡中心化路由。取之的是路由存在于布局和 UI 之间。

router/index.js中：

component/MyView.js中

最低0.47元/天 解锁文章
react-router v4 嵌套路由实现
xinqilela的博客
03-20 1703
1. react-router4.0以下的嵌套路由实现 :嵌套的路由可以放在一个router标签中，形式如下,嵌套的路由也直接放在一起。&lt;Route component={App}&gt; &lt;Route path="groups" components={Groups} /&gt; &lt;Route path="users" components={Users}&gt; ...
React学习19----react-router4.x路由的嵌套
翟浩浩Android专栏
02-27 522
路由的嵌套： 举例说明：（下面例子） 在 App.js 中 配置路由 User , 在User 里面在配置Info组件的路由 具体例子如下： 效果图： 项目结构： 最核心的两个类： App.js 中配置 Home.js 和 User.js 的路由： import React, {Component} from 'react'; import logo from './asset/images/...
react-router4 嵌套路由的使用方法
08-29
本篇文章主要介绍了react-router4 嵌套路由的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React-routerV7 配置路由
最新发布
lmryBC49的博客
04-14 1314
本文讲解了React-routerV7的基本路由使用，文中所用的方式适合于小型项目，下一章将讲解常规路由模式。
使用React Router v4的嵌套路由
cumi6497的博客
07-20 371
React Router v4 introduced a new declarative, component based approach to routing. With that approach came some confusion around nested routes. In this post we’ll break down that confusion and you’ll ...
React Router 4.0 ---- 嵌套路由和动态路由
zxh2075的专栏
08-18 2052
嵌套路由，从广义上来说，分为两种情况：一种是每个路由到的组件都有共有的内容，这时把共有的内容抽离成一个组件，变化的内容也是一个组件，两种组件组合嵌套，形成一个新的组件。另一种是子路由，路由到的组件内部还有路由。 　　对于共有的内容，典型的代表就是网页的侧边栏，假设侧边栏在左边，我们点击其中的按钮时，右侧的内容会变化，但不管右侧的内容怎么变化，左侧的侧边栏始终存在。这个侧边栏就是共有内容，如下图所...
react-router-dom v6 的嵌套路由和路由参数传递
m0_50163856的博客
02-07 1420
安装 npm install react-router-dom 修改index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import {BrowserRouter} from 'react-router-dom' ReactDOM.render( <React.StrictMode> <BrowserRouter>..
react学习日记---(5) react-router-dom@6 react路由-路由重定向-路由嵌套
Tomcat20的博客
10-11 843
react-router-dom@6 路由-路由重定向-路由嵌套
React-router-V6.0路由的使用
bhegi_seg的博客
02-21 304
我的有道云参考文档 一、路由的介绍 React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步 通过react-router主要创建单页面的大型应用（SPA） 二、安装路由 先通过npx create-react-app搭建一个项目 1、在react的项目中安装路由react-router或者react-router-dom npm install react-router-dom --save package.json里
4.2react-router实现嵌套路由
bangbDIV的博客
10-29 499
import {BrowserRouter, Route, Switch, Link}from 'react-router-dom'; class demo extends React.Component { render() { return ( &lt;BrowserRouter&gt; &lt;div&gt...
④react-router4.x 嵌套路由的使用
sJohnny的博客
10-10 980
当遇到以上的情况， content 部分内容需要根据 content menu的点击儿变换，我们就需要用动态路由来实现 主要的代码逻辑： 用户页面会涉及到路由嵌套 入口文件代码： &lt;Router&gt; &lt;div&gt; &lt;header className="title"&gt; &lt;Link to="/"&gt;首页组件&lt;
React-router 4路由嵌套
与你清欢
01-30 1863
1.React-router-dom 4 嵌套路由 Index 页面代码 div> TabBar> TabBar.Item title='page页面' onPress={()=>this.props.history.push('/page')} />//点击跳转page页面 TabBar> Route path={`${this.props.ma
vue-router4之嵌套路由
youhebuke225的博客
06-26 885
例子 目录 index.js AboutChildA.vue AboutChildB.vue About.vue 效果
React-Router 4 路由嵌套实现的分步表单
sinat_36193631的博客
12-04 5076
如图 1.点击左侧的菜单（分步表单），初始化右侧显示的是：分步表单第一步，对应地址栏是：localhost:3333/step-form 2.点击下一步显示：分步表单第二步，对应地址栏是：localhost:3333/step-form/confirm route.js import React from 'react'; import { BrowserRouter as Router
reactrouter4路由钩子_react-router 4 路由的嵌套
weixin_39687192的博客
12-20 134
1.在component组件内部需要嵌套的位置直接嵌套Route标签这个方法会使得路由标签比较分散,子组件我们必须直接将Route标签写入到父组件之中，而且路由必须包含根路径.// Dashboard.jsximport Menu from '~/components/Menu/Menu';import React from 'react';import {Route,Switch} from "...
react（44）——嵌套路由Route的使用
木子 旭的博客
03-19 230
1.示例代码 app的代码 import React, { Component } from "react"; import Div1 from "./components/div1"; import Div2 from "./components/div2"; import Page1 from "./pages/page1"; import Page2 from "./pages/page2"; import { Link, BrowserRouter, Route, NavLink
ReactRouter学习之旅四：嵌套路由
muAluo的博客
11-14 301
要实现的小案例如下： 搭建项目基础 新建一个项目来完成我们的新案例： create-react-app demo02 安装react-router： npm install --save react-router-dom 照例清除一下src文件夹下除index.js外的其他文件。在src文件夹下新建Pages文件夹，Pages下新建video（视频教程）和workplace（职场技能）文件夹。 src文件夹下新建AppRouter.js文件，AppRouter作为首页组件，首页组件一般
reactrouter4路由钩子_react-router4 嵌套路由的使用方法
weixin_39678493的博客
12-20 175
react我自己还在摸索学习中，今天正好学习一下react-router4 嵌套路由的使用方法，顺便留着笔记先直接贴代码import react from 'react';import reactdom from 'react-dom';import { hashrouter as router, route, switch} from 'react-router-dom';import crea...
React-Router4 嵌套路由实现的两种方式以及路由过渡动画的实现方式
李二狗的博客
03-08 1909
刚学习react的路由 一个小的后台管理demo 目录结构 // 后台管理页面通常有两种布局方式 // 一种是没有导航栏的 登录页面 // 一种是含有导航栏的 各功能性页面 // 导航栏不需要每次都渲染 Layout中含有导航栏 和 传递进来的子组件即可 // 大致思路就是 登录页面和Layout页面同级 切换路由的时候 切换Layout中的子组件 src pages Layou...
react-router-dom v6 路由嵌套
07-28
在React Router v6中，路由嵌套的写法有所改变。以下是一个示例： ```jsx import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { Outlet } from 'react-router-dom'; const App =...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值