首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

react router 4-如何创建具有嵌套路由但回退到未找到的根路径

React Router 4 是一个用于 React 应用程序的路由库,它允许我们在应用程序中实现页面之间的导航和路由功能。在 React Router 4 中,我们可以使用嵌套路由来创建具有层次结构的路由系统。

要创建具有嵌套路由但回退到未找到的根路径,我们可以按照以下步骤进行操作:

  1. 首先,确保已经安装了 React Router 4。可以使用以下命令进行安装:
代码语言:txt
复制
npm install react-router-dom
  1. 在应用程序的根组件中,引入所需的模块:
代码语言:txt
复制
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  1. 创建根组件,并在其中定义路由:
代码语言:txt
复制
const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/nested" component={Nested} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};
  1. 创建 Home 组件和 Nested 组件,并在其中定义嵌套路由:
代码语言:txt
复制
const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/nested">Go to Nested</Link>
    </div>
  );
};

const Nested = () => {
  return (
    <div>
      <h1>Nested</h1>
      <Link to="/">Go to Home</Link>
    </div>
  );
};
  1. 创建 NotFound 组件,用于处理未找到的路径:
代码语言:txt
复制
const NotFound = () => {
  return (
    <div>
      <h1>404 - Not Found</h1>
      <Link to="/">Go to Home</Link>
    </div>
  );
};

在上述代码中,我们使用 <Switch> 组件来确保只有一个路由会被渲染。<Route> 组件用于定义路径和对应的组件。exact 属性用于确保只有在路径完全匹配时才会渲染对应的组件。

当用户访问根路径时,会渲染 Home 组件。在 Home 组件中,我们可以使用 <Link> 组件来导航到嵌套路径 /nested。当用户访问 /nested 路径时,会渲染 Nested 组件。在 Nested 组件中,我们可以使用 <Link> 组件来返回到根路径。

如果用户访问了未定义的路径,会渲染 NotFound 组件,其中包含一个返回到根路径的链接。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Next.js】002-路由篇|App Router

:你的项目中同时使用了 Next.js 的 App Router(新路由系统)和 Pages Router(传统路由系统)来处理根路径"/",这会导致路由冲突。...Next.js 13+ 版本引入了 App Router,但它不能与 Pages Router 混用于相同的路径。我们需要选择其中一种路由系统。...别偷懒,还是探究一下 Pages Router 方式吧 创建代码 运行并访问项目 /about 路径 三、从 Pages Router 到 App Router 现在你打开使用 create-next-app...四、使用 App Router 1、定义路由 文件夹被用来定义路由。 每个文件夹都代表一个对应到 URL 片段的路由片段。**创建嵌套的路由,只需要创建嵌套的文件夹。...根布局(Root Layout) 布局支持嵌套,最顶层的布局我们称之为根布局(Root Layout),也就是 app/layout.js。它会应用于所有的路由。除此之外,这个布局还有点特殊。

31101

【Next.js】002-路由篇|App Router

的 App Router(新路由系统)和 Pages Router(传统路由系统)来处理根路径"/",这会导致路由冲突。...Next.js 13+ 版本引入了 App Router,但它不能与 Pages Router 混用于相同的路径。我们需要选择其中一种路由系统。...别偷懒,还是探究一下 Pages Router 方式吧创建代码运行并访问项目/about 路径三、从 Pages Router 到 App Router现在你打开使用 create-next-app 创建的项目...四、使用 App Router1、定义路由文件夹被用来定义路由。 每个文件夹都代表一个对应到 URL 片段的路由片段。创建嵌套的路由,只需要创建嵌套的文件夹。...根布局(Root Layout)布局支持嵌套,最顶层的布局我们称之为根布局(Root Layout),也就是 app/layout.js。它会应用于所有的路由。除此之外,这个布局还有点特殊。

26710
  • React Router初学者入门指南(2023版)

    然后,在 App 组件内部, Routes 组件限制了不同的 Route 组件。 第一个路由的路径设置为("/"),当访问时将渲染 Home 组件。这个默认路由将始终在访问根URL时渲染。...当您在地址栏中的根URL后添加 /eras 时,React Router使用 Routes 组件来匹配具有路径设置为 /eras 的确切 Route 。...为了绕过这些限制,React Router使用 Link 组件。 在React Router中, Link 是路由导航的主要方式。链接组件在底层使用 a 标签,但通过阻止默认页面重新加载来增强它。...嵌套路由 在React Router中,嵌套可以被视为在路由之间建立父子连接。这可以用来组织共享相同URL路径的路由。...这是因为React Router不知道如何放置这些嵌套组件。为了解决这个问题,React Router提供了一个名为 Outlet 的组件,可以明确指出嵌套路由组件应该放置在哪里。

    65831

    React路由

    前端路由的功能:让用户从一个视图(页面)导航到另一个视图(页面) 前端路由是一套映射规则,在React中,是 URL路径 与 组件 的对应关系 使用React路由简单来说,就是配置 路径和组件(配对)...想要实现单页应用程序(SPA),就必须使用到路由 react-router 官网:react-router 路由基本使用 基本步骤 安装 yarn add react-router-dom react-router-dom...component={About}/> 嵌套路由的配置...在React中,配置嵌套路由非常的简单,因为Route就是一个组件,可以在任意想配置的地方进行配置 但是配置嵌套路由的时候,需要对路径进行处理,必须要先匹配到父级路由,才能匹配到子路由 /...编程式导航:通过 JS 代码来实现页面跳转 history 是 React 路由提供的,用于获取浏览器历史记录的相关信息 push(path):跳转到某个页面,参数 path 表示要跳转的路径 go(n

    2K20

    深入浅出解析React Router 源码

    我们应该如何实现一个前端路由 一开始,我们先跳出 React Router,思考如何用原生 JavaScript 实现一个的前端路由,所谓前端路由,我们无非要实现两个功能:监听记录路由变化,匹配路由变化并渲染内容...React Router 的组件通常分为三种: 路由器组件: 和 ,路由器组件的作为根容器组件, 等路由组件必须被包裹在内才能够使用...看回我们的代码,对于我们开头实现的原生路由,如果用 React Router 改写,应该是怎样的写法呢: import { BrowserRouter, Switch, Route, Link } from.../RouterContext"; import React from 'react'; class Router extends React.Component {   // 该方法用于生成根路径的 ...此外在原生实现中,我们还忽略了路由嵌套的情况,我们其实只在根节点绑定了监听事件,没有考虑子组件的路由,而在 React Router 中,Router>通过context的方式,将路由信息传递给其子孙组件

    3K10

    《vue2进阶篇:路由》第10章:vue-router,包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的rep

    一般常用框架的路由机制都是用的这种方法,例如Angualrjs自带的ngRoute和二次开发模块ui-router,react的react-route,vue-route… 2)利用HTML5的History...存储路由更新时的回调到回调数组routes中,回调函数将负责对页面的更新 Router.prototype.route = function (path, callback) {...创建和挂载根实例 const app = new Vue({ router }).$mount('#app'); // 现在,应用已经启动了!...《vue2进阶篇:路由》第10章:vue-router,包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件2....vue2进阶篇:安装路由3.vue2进阶篇:vue-router之基础路由4.vue2进阶篇:vue-router之嵌套(多级)路由5.vue2进阶篇:vue-router之路由的query参数6.vue2

    9700

    React前端路由

    React中的前端路由可以实现以下功能:路由匹配:根据当前URL的路径匹配要渲染的组件。页面导航:通过点击链接或执行编程式导航来切换页面。...参数传递:通过URL的查询参数或路径参数将数据传递给要渲染的组件。嵌套路由:支持嵌套的路由结构,使应用程序可以有多个层级的页面。路由保护:通过路由守卫或权限控制来限制访问某些页面。...Reach Router:Reach Router是一个轻量级的前端路由库,提供了类似于React Router的功能,但具有更简单的API和更好的可访问性支持。...React Router示例下面是一个使用React Router库的示例,展示了如何在React中实现前端路由:首先,安装React Router库:npm install react-router-dom...在应用程序组件中,我们使用Router组件来包裹整个应用程序,并在导航栏中使用Link组件创建链接。Switch组件用于确保只有一个路由匹配成功,Route组件用于定义每个路由的路径和对应的组件。

    1.7K20

    react-router学习笔记

    嵌套关系:深度优先遍历整个路由配置 路径语法:相对路径的话,会根据嵌套关系,与自身路径进行拼接;绝对路径会忽略嵌套关系 优先级:路由算法会根据定义的顺序自顶向下匹配路由,要注意前一个路由不会被后一个路由匹配所忽略替换...这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境(像 React Native )。 和另外两种history的一点不同是你必须创建它,这种方式便于测试。...React Router 里的路径匹配以及组件加载都是异步完成的,不仅允许你延迟加载组件,并且可以延迟加载路由配置。在首次加载包中你只需要有一个路径定义,路由会自动解析剩下的路径。...> 并提供了一些生命周期的回调,具体可以参考文档。...嵌套路由 React Router4.0 嵌套路由与 3.0 不同,是通过组件 Route 的嵌套实现的。

    2.7K10

    构建通用的 React 和 Node 应用

    Link 是 React Router 为了在视图间生成链接所提供的特殊组件。 最后,我们使用 activeClassName 属性,当当前路由与链接路径匹配时会添加 active 的类。...我们将在路由的部分看到 React Router 如何在 Layout 组件中嵌套另一个组件。...注意如何在一个主 Route 组件中嵌套路由。我解释一下它的原理: 跟路由会将 / 路径映射到 Layout 组件。这允许我们在应用程序的每个部分使用自定义的 layout 。...ReactRouter.match 接收两个参数:第一个参数是配置对象,第二个是回调函数。配置对象需要有两个键值: routes: 用于传递 React Router 的路由配置。...最后一种情况是,当路由不匹配的时候,我们只是简单的向浏览器返回一个 404 未找到的错误。

    8.8K70

    React Router 使用教程

    本文介绍 React 体系的一个重要部分:路由库React-Router。它是官方维护的,事实上也是唯一可选的路由库。它通过管理 URL,实现组件的切换和状态的变化,开发复杂的应用几乎肯定会用到。...二、嵌套路由 Route组件还可以嵌套。...path属性也可以使用相对路径(不以/开头),匹配时就会相对于父组件的路径,可以参考上一节的例子。嵌套路由如果想摆脱这个规则,可以使用绝对路由。...这是因为对于根路由来说,activeStyle和activeClassName会失效,或者说总是生效,因为/会匹配任何子路由。而IndexLink组件会使用路径的精确匹配。... Home 上面代码中,根路由只会在精确匹配时,才具有activeClassName。

    2.2K40

    React Router v4 完全指北

    本次教程涉及的例子包含: 基本路由跳转 嵌套路由 带路径参数的嵌套路由 保护式路由 主要围绕构建这些路由所涉及的概念进行讨论。这个项目的全部代码在这个Github仓库可以看到。...嵌套路由 创建嵌套路由之前,我们需要更深入的理解 如何运行。开始吧。 有三个可以用来定义要渲染内容的props: component.在上面我们已经看到了。...match.path.返回路由路径字符串 - 就是 。将用来创建嵌套的 。...有 组件的话,只有第一个匹配路径的子 会渲染。 Demo 2: 嵌套路由 之前,我们给 /, /category and /products创建了路由。...在本次教程中,我们学到了: 如何配置和安装React Router 基础版路由,和一些基础组件,例如 Router>, 和 如何构建一个有导航功能的极简路由和嵌套路由 如何根据路径参数构建动态路由

    2.8K20

    前端开发需要了解的「路由跳转原理」

    目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式,在路由切换时替换 DOM Tree 中最小修改的部分 DOM,来减少原先因为多页应用的页面跳转带来的巨量性能损耗。...它们都有自己的典型路由解决方案,@angular/router、react-router、vue-router。...一般来说,这些路由插件总是提供两种不同方式的路由方式: Hash 和 History,有时也会提供非浏览器环境下的路由方式 Abstract,在 vue-router 中是使用了外观模式将几种不同的路由方式提供了一个一致的高层接口...下面我们具体看看这两种方式都有哪些特点,并提供简单的实现,更复杂的功能比如懒加载、动态路径匹配、嵌套路由、路由别名等等,可以关注一下后面的 vue-router 源码解读方面的博客。 1....1.2 实例 这里简单做一个实现,原理是把目标路由和对应的回调记录下来,点击跳转触发 hashchange 的时候获取当前路径并执行对应回调,效果: class RouterClass { constructor

    1.2K30

    前端路由跳转基本原理

    目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式,在路由切换时替换 DOM Tree 中最小修改的部分 DOM,来减少原先因为多页应用的页面跳转带来的巨量性能损耗。...它们都有自己的典型路由解决方案,@angular/router、react-router、vue-router。...一般来说,这些路由插件总是提供两种不同方式的路由方式: Hash 和 History,有时也会提供非浏览器环境下的路由方式 Abstract,在 vue-router 中是使用了外观模式将几种不同的路由方式提供了一个一致的高层接口...下面我们具体看看这两种方式都有哪些特点,并提供简单的实现,比如基本的功能,更复杂的功能比如懒加载、动态路径匹配、嵌套路由、路由别名等等,可以关注一下后面的 vue-router 源码解读方面的博客。...1.2 实例 这里简单做一个实现,原理是把目标路由和对应的回调记录下来,点击跳转触发 hashchange 的时候获取当前路径并执行对应回调,效果: ?

    1.7K20

    react-router 入门笔记

    React-router 笔记 官方文档 基本思路 react-router 通过react 组件的方式实现, 路由相关的数据,通过props传递给组件调用, 路由层级关系, 通过标签嵌套实现 基础标签...与App中的路由组件处于同一层级, 当点击 Link标签时, 将进入 About 而不是Sub的自定义组件 */ 创建属于当前页的子路由需要,需要创建新的 '' 标签,...实际路径为: '/home/sub' 所以在划分路径时, 需要注意路径嵌套的问题,如对根路径 '/' 的处理, 很可能出现,路由配置冲突。..., 可以看到,在父组件和子组件中,都配置了路径 '/books', ** 当触发 Link 跳转时,将显示自组件内的组件, 即显示: '路由嵌套,path=/sub' ** 看起来一切正常,但当我们刷新页面...参考: React router的Route中component和render属性的使用 children 无论路径是否匹配都将被渲染, 不同的是, 对于已匹配的路径,children 组件内将获取到

    1.6K20

    react-router4

    一、关于react-router react-router是一些封装好的组件用于前端路由,当我们点击的时候会出现一个虚拟的路由,并不会做页面的全刷新,实现不同组件之间的切换和跳转。...知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。)...react-router提供核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需的特定组件。 ?...a标签,也是用于路由的跳转,2个组件都有1个to的属性(属性值即切换路由路径,当然属性值也可以为对象的形式传递),唯一不同的是NavLink生成a标签以后会增加一个class叫active。...Route不是全匹配,所以当我们进行路由判断的时候,比如一个路径为"/",一个为“/news”这样我们进行跳转“/news”时任然会匹配到“/”,所以这时我们需要使用exact加在有"/"路径的Route

    1.5K30
    领券