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

在react-router v4中看到嵌套路由中的空白页

在react-router v4中,嵌套路由中的空白页是指当嵌套路由的路径与当前URL不匹配时,显示一个空白页或者自定义的页面内容。

React Router是一个用于构建单页面应用程序的库,它提供了一种在React应用程序中管理路由的方式。嵌套路由是指在一个路由组件中嵌套另一个路由组件,形成层级关系。

当使用react-router v4时,可以通过Switch组件和Route组件来实现嵌套路由。Switch组件用于包裹多个Route组件,它会按照定义的顺序匹配URL,并渲染第一个匹配的Route组件。如果没有匹配的Route组件,可以在Switch组件中添加一个Route组件作为默认路由。

当嵌套路由的路径与当前URL不匹配时,可以在Switch组件中添加一个没有path属性的Route组件,作为空白页的路由。这样,当没有其他路由匹配时,Switch组件会渲染这个空白页。

以下是一个示例代码:

代码语言:txt
复制
import React from 'react';
import { Switch, Route } from 'react-router-dom';

const App = () => (
  <div>
    <h1>My App</h1>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
      <Route component={NotFound} /> {/* 空白页路由 */}
    </Switch>
  </div>
);

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;
const NotFound = () => <h2>Page Not Found</h2>;

export default App;

在上面的代码中,如果URL匹配不到任何路由,就会渲染NotFound组件,显示"Page Not Found"。

关于React Router v4的更多信息,你可以参考腾讯云的产品文档:React Router v4

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

相关·内容

React Router3到5 升级小记

所以Link组件导入也变了,同时增加了属性 replace 表示是否替换掉原地址 //v3 import {Link} from react-router; //v4 v5 import { Link...组件渲染方式2 增加了render属性,v3不存在这个属性,render 表示path匹配时被调用方法,而不是创建一个组件,但是需要一个返回值,返回一个组件或者null。...this.props.location.action //V4 5 this.props.history.action 嵌套路由 V3使用路由嵌套是很平常事儿,而且写起来也很简单 <Router...Route 监控事件移除 v3,可以使用使用 Route onEnter, onUpdate和 onLeave事件来做一些事情。...v4 5,Route这些事件没了,不过我还没用到这些事件,只是简单提一句。 按需加载 v3 里实现组件按需加载还是很方便,因为提供了特定方法。

2.3K20
  • 「React进阶」react-router v6 通关指南

    新版 router ,已经没有匹配唯一 Switch 组件,取而代之是 Routes 组件,但是我们不能把 Routes 作为 Switch 代替品。...因为架构 ,Routes 充当了很重要角色, react-router路由原理 文章,曾介绍到 Switch 可以根据当前路由 path ,匹配唯一 Route 组件加以渲染。...但是 Switch 本身是可以被丢弃不用,但是新版由中, Routes 充当了举足轻重作用。...对于新版本路由,嵌套路由结构会更加清晰,比如在老版本由中,配置二级路由,需要在业务组件配置,就像在第一个例子,我们需要在 Children 组件中进行二级路由配置。...使用层面上: 老版本路由,对于嵌套路由,配置二级路由,需要写在具体业务组件

    5.2K41

    React 进阶 - React Router

    整个 React-Router 核心,里面包括两种路由模式下改变路由方法,和监听路由变化方法等 React-Router 有了 History 路由监听 / 改变核心,那么需要调度组件负责派发这些路由更新...,也需要容器组件通过路由更新,来渲染视图 History 核心基础上,增加了 Router ,Switch ,Route 等组件来处理视图渲染 React-Router-DOM React-Router...基础上,增加了一些 UI 层面的拓展比如 Link ,NavLink React-Router 基础上,增加了两种模式根部路由 BrowserRouter ,HashRouter # history...通过 window.location.hash 属性获取和设置 hash 值 哈希路由模式下应用,切换路由,本质上是改变 window.location.hash 监听路由 hashchange...Redirect Redirect 可以路由不匹配情况下跳转指定某一由,适合路由不匹配或权限路由情况 注意 Switch 包裹 Redirect 要放在最下面,否则会被 Switch 优先渲染

    1.9K21

    React 一些 Router 必备知识点

    ={App}/> ), document.getElementById('app')); 亦或是嵌套路由: React-Router V4 版本之前可以直接嵌套,方法如下:...后续对比 React-Router 版本发现,是因为 V4 版本变更了其渲染逻辑,原因据说是为了践行 React 组件化理念,不能让 Route 标签看起来只是一个标签(奇怪知识又增加了)。...现在较新版本,可以使用 Render 方法实现嵌套。...路由传参小 Tips 实际开发,往往页面切换时需要传递一些参数,有些参数适合放在 Redux 作为全局数据,或者通过上下文传递,比如业务一些共享数据,但有些参数则适合放在 URL 传递,比如页面类型或详情页单据唯一标识...id=123 那么 React-Router ,问号带参数,可以通过 this.props.location (官方墙推 ?)获取。

    2.9K40

    React 一些 Router 必备知识点

    ={App}/> ), document.getElementById('app')); 亦或是嵌套路由: React-Router V4 版本之前可以直接嵌套,方法如下:...后续对比 React-Router 版本发现,是因为 V4 版本变更了其渲染逻辑,原因据说是为了践行 React 组件化理念,不能让 Route 标签看起来只是一个标签(奇怪知识又增加了)。...现在较新版本,可以使用 Render 方法实现嵌套。...路由传参小 Tips 实际开发,往往页面切换时需要传递一些参数,有些参数适合放在 Redux 作为全局数据,或者通过上下文传递,比如业务一些共享数据,但有些参数则适合放在 URL 传递,比如页面类型或详情页单据唯一标识...id=123 那么 React-Router ,问号带参数,可以通过 this.props.location (官方墙推 )获取。

    2.7K20

    【路由】:history——ReactRouter vs VueRouter

    这篇文章分析一下浏览器原生历史管理、react-router 历史管理,以及vue-router 历史管理。给大家直观展示一下两大主流框架(React、Vue)路由管理方面的异同。 2....ReactRouter's history 特别注意 "react-router" 目前最新版本是 "5.2.0" "react-router": "^5.2.0" 依赖是 "history":...备注:其实在 vue-router’s history 也可以看到一些 react-router's history 代码影子。...它包含从 URL 解析得到信息(例:path、hash、params、query、meta等),还有记录从根路由到当前激活路由整条链 RouteRecord 数组(即:matched 字段)。... 是支持嵌套,回到 render 函数,其中定义了 depth 概念,它表示 嵌套深度。 parent.

    1.6K20

    react+redux+webpack教程4

    browserHistory就是我们最熟悉浏览器管理历史, 使用这种历史管理方式感觉上跟普通浏览网页方式一样:url路径会随着跳转及前进、后退按钮而变化, 但是react-routerbrowserHistory...hashHsitory只控制url#号后面的部分,这是前一段时间单页应用比较通用方式,但是随着HTML5普及, 这个方式有逐渐被淘汰趋势。这里我们使用browserHistory。...。...一个非常实用场景就是刚才我新闻详情页里阅读到一则很好新闻,想给分享出去,那别人要通过这个url还能查看到这个新闻。 我们目前没做到这个。现在我们要实现依靠id访问到新闻。...现在访问/news可以搜索新闻,点击新闻标题可以跳转到/news/xxx查看详细内容,点击登录可以跳转登陆页,可是,访问根路径却只有一个带标题空白页

    1.8K100

    React Router基础教程

    它看起来像是这样 页面文件 ? 在外部脚本文件 ? ? 2....等构建工具编译引入 库引入之后,ReactDOMrender方法,就可以使用相关组件了 3....{routes}只能有一个父级,所以这里加了标签 另外,路由Route也可以嵌套,在上面的例子嵌套起来可能更符合实际情况 需要注意是,这里App父级,为了获取子级First与Second...,路径"/"下我们看到空白页面,可以添加默认页面组件用于导航 Link: 可以认为它是标签在React实现,使用to属性定义路径,还可以通过activeClass或activeStyle...路由path规则 path定义路由路径,hashHistory,它主页路径是#/  自定义Route路由通过与父Routepath进行合并,与主页路径合并,得到最终路径 path语法

    97420

    手把手教你实现全栈博客项目(2)-- 前端react-xxx、路由配置

    index引入后,即为stateadmin节点。 configureStore 配置store文件。这个文件功能正如其名,就是配置store。其中我们主要做了如下工作。...最后倒入store,用于App中使用。 react-router 配置说明 react-router配置主要在/container/index.js文件。该文件负责导出所有路由中文件。...也就是我们项目中front部分。 ? 所以根据路由配置先具体后模糊规则。并且这里牵涉到路由嵌套,所以必定抽离出组件来: index.js render部分如下: ?...注意admin路由匹配,这里必须要使用{match},否则你点击link你会发现路由跳转成功了,但是对应页面没有渲染。...后续随着开发,回往/app/reducers添加对应reducer。以及由中添加新建页面。 如果您有更好想法,欢迎您联系我。我们一起改进~ 如果有什么不明白地方,欢迎提issue。

    74130

    react全家桶之router使用

    当这个职业红利期结束,行业开始回归沉淀,其实你会发现,所谓大前端思维,其实是非常局限react-router使用(v4) 最新版本已经是5.0了。不过本文用例均可跑通。...安装: npm install --save react-router-dom npm install --save react-router 设定路由器 先引入最常用三个依赖 BrowserRouter...嵌套 Route组件嵌套在其他页面组件中就产生了嵌套关系 。 假设存在这样需求,我点击详情,不出现详情页面,而是直接在FruitList展示。...react-router已有的特性可实现类似vue中路由守卫功能 你可以创建高阶组件包装route使其具有权限判断。.../store/userReducer" // isLogin,两个组件都需要 const Login=connect(mapStateToProps,mapDispatchToProps)(getLogin

    1.2K20

    react-router学习笔记

    路由跳转过程,onLeave hook 会在所有将离开由中触发,从最下层子路由开始直到最外层父路由结束。然后onEnter hook会从最外层父路由开始直到最下层子路由结束。...嵌套关系:深度优先遍历整个路由配置 路径语法:相对路径的话,会根据嵌套关系,与自身路径进行拼接;绝对路径会忽略嵌套关系 优先级:路由算法会根据定义顺序自顶向下匹配路由,要注意前一个路由不会被后一个路由匹配所忽略替换...Hash history 不需要服务器任何配置就能运行,但是不推荐实际线上环境中使用。 像这样 ?_k=ckuvup 没用 URL 是什么?...state” 而不显示 URL ,这就像是一个 HTML post 表单数据。...嵌套路由 React Router4.0 嵌套路由与 3.0 不同,是通过组件 Route 嵌套实现

    2.7K10

    react-router-dom使用指南(最新V6)

    (可以使用相对路径,语法和 JS 相同) 传入-1表示后退 四、动态路由参数 4.1 路径参数 Route组件path属性定义路径参数 组件内通过useParams hook 访问路径参数 <...路径正则匹配已被移除。 兼容类组件 以前版本,组件props会包含一个match对象,在其中可以取到路径参数。 但在最新 6.x 版本,无法从 props 获取参数。...name=foo return foo; } 五、嵌套路由 5.1 路由定义 通过嵌套书写Route组件实现对嵌套路由定义。...DashboardGraphs />} /> } /> ); } 六、默认路由 定义:嵌套由中...传统前端项目中,URL改变意味着向服务器重新请求数据。 现在客户端路由( client side routing ),可以做到编程控制URL改变后反应。

    4.2K21

    react-router-middleware-plus开源啦 | 基于react-router v6零成本式路由权限解决方案

    一、你苦恼~~ 你还在为react-router路由权限控制而烦恼吗? 你还在翻遍了社区react路由权限相关文章发现都是V4、V5版本而烦恼吗?...你还在为自行适配react-router v6版本权限步骤繁杂,多重鉴权逻辑嵌套而烦恼吗? 他来了!他来了!他带着礼物走来了!...,是包含了一个或多个用户自定义auth callback数组,页面路由加载时,会依次执行中间件auth callback。...就通过配置middleware,灵活搭配组合callback,callback自定义处理逻辑,路由权限处理问题解决了 四、Props介绍 react-router-middleware-plus使用时和...react-router-domuseRoutes是一致

    1.7K30

    React Router v4教程:为你 React 应用创建路由

    React 路由 React Router v4 优点 常规路由 通常,当用户浏览器中键入 URL 时,会向服务器发送 HTTP 请求,然后服务器检索 HTML 页面。...例如我们习惯看到显示欢迎消息和相关内容主页。网站介绍详细信息可以“关于我们”页面上找到,用户列表及其详细信息会出现在不同页面上,可能还有其他各种页面包含很多不同视图。...那么你认为这是怎样实现呢?程序添加路由器可以解决这一需求。 React 路由 这将把我们带到本文主题:React Router v4。... React ,路由查看每个组件历史记录,当历史记录发生任何变化时,组件会重新渲染。 Router v4 之前,我们必须手动设置 History 值。...这是 React Router v4 声明 性质一个例子。 v4 路由为 inclusive 意味着可以同时呈现多个路由。我们使用 exact 属性来解决多匹配问题。

    2K20

    2020-5-16-React-Router源码简析

    render利用了ReactContext提供了RouterContext,HistoryContext两个Context信息,供子元素使用。...源码解析 我们可以从上述源码中看到: Routecomponent,render,children三个属性是互斥 优先级children>component>render children无论路由匹配与否...,都会渲染 这一点也可以React-Router官网得到相应信息 ?...小结 通过分析源码我们了解到了 React-Router通过监听location变化触发刷新,实现路由更新 利用ReactContext机制,实现嵌套路由分析,和状态传递 Route组件component...,render,children三个属性渲染机制 所有的机制都在render,所以能够渲染时进行动态路由 ---- 参考文档: react-router/packages/react-router

    96030
    领券