首页
学习
活动
专区
工具
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 组件,其中包含一个返回到根路径的链接。

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

相关·内容

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 组件,可以明确指出嵌套路由组件应该放置在哪里。

57131
  • 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 中,通过context方式,将路由信息传递给其子孙组件

    3K10

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

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

    7600

    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 v4 完全指北

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

    2.8K20

    React Router 使用教程

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

    2.2K40

    react-router 入门笔记

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

    1.6K20

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

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

    1.2K30

    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

    前端路由跳转基本原理

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

    1.7K20
    领券