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

React Router 4- location.key在<Match>子代的道具中不可用

React Router是一个用于构建单页应用的库,它提供了一种在React应用中管理路由的方式。React Router 4是React Router的最新版本,它引入了一些新的概念和API。

在React Router 4中,location.key是一个用于标识路由变化的唯一键。它在<Match>组件的子代中不可用,因为<Match>组件已经被废弃,取而代之的是<Route>组件。

<Route>组件是React Router 4中用于定义路由规则的主要组件。它可以通过path属性指定匹配的URL路径,并通过component属性指定要渲染的组件。当URL路径与path属性匹配时,<Route>组件会渲染指定的组件。

在<Route>组件的子代中,可以通过props获取到location对象,其中包含了一些与当前路由相关的信息,如pathname、search、hash等。但是,location对象中的key属性在<Route>组件的子代中也不可用。

为了在<Route>组件的子代中访问location.key属性,可以使用withRouter高阶组件。withRouter是一个用于将路由相关属性注入到组件props中的高阶组件。通过使用withRouter,可以在<Route>组件的子代中访问到location.key属性。

下面是一个使用React Router 4的例子:

代码语言:jsx
复制
import React from 'react';
import { BrowserRouter as Router, Route, withRouter } from 'react-router-dom';

const MyComponent = withRouter(({ location }) => (
  <div>
    <h1>当前路径:{location.pathname}</h1>
    <h2>当前路径的唯一键:{location.key}</h2>
  </div>
));

const App = () => (
  <Router>
    <Route path="/" component={MyComponent} />
  </Router>
);

export default App;

在上面的例子中,使用了withRouter将MyComponent组件包裹起来,这样就可以在MyComponent组件中访问到location.key属性。

推荐的腾讯云相关产品:腾讯云服务器(CVM),腾讯云对象存储(COS),腾讯云数据库(TencentDB),腾讯云容器服务(TKE)。

腾讯云产品介绍链接地址:

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

相关·内容

  • (重磅来袭)react-router-dom 简明教程

    我们看到的目录如下: 在 src 下新建一个 HelloRouter.js,代码如下: import React, { PureComponent } from 'react'; import {...from属性: 要重定向的路径名。路径-regexp@^1.7.0能够理解的任何有效URL路径。在to中为模式提供了所有匹配的URL参数。必须包含to中使用的所有参数。...)中使用this.props.match 路由render函数中解构出match对象Route render as ({ match }) => () 路由children函数中解构出match对象Route...因此,建议从渲染道具中访问位置,而不是从history.location中访问 常用Hooks react >= 16.8 useHistory import { useHistory } from "...它主要用于在不实际呈现的情况下访问匹配数据 import { Route } from "react-router-dom"; function BlogPost() { return

    12K10

    前端路由Router原理

    在前端开发中,我 们可以使⽤路由设置访问路径,并根据路径与组件的映射关系切换组件的显示,⽽这整个过程都是在同 ⼀个⻚⾯中实现的,不涉及⻚⾯间的跳转,这也就是我们常说的单⻚应⽤(spa)。...在前端开发 中,我们可以使⽤路由设置访问路径,并根据路径与组件的映射关系切换组件的显示,⽽这整个过程都 是在同⼀个⻚⾯中实现的,不涉及⻚⾯间的跳转,这也就是我们常说的单⻚应⽤(spa)。...react-router 提供最基本的路由功能,实际使用的时候我们不会直接安装 react-router,而是根据应用运行的环境选择安装 react-router-dom(在浏览器中使用)或 react-router-native...react-router-dom 和 react-router-native 都依赖 react-router,所以在安装时,react-router 也会自动安装,创建 web 应用。...MemoryRouter 把 URL 的历史记录保存在内存中的 Router>(不读取、不写入地址栏)。在测试和非浏览器环境中很有用,如 React Native。

    2.7K20

    React 折腾记 - (2) 实现路由动效过渡,并解决过程中奇奇怪怪的问题

    前言 写这个只是更好的梳理下我实现过程中遇到的奇奇怪怪的问题.....---- 基础依赖 styled-components@3.4.2 : 写样式的 react-transition-group@2.4.0 : 路由过渡的,react官方的 react-router-dom...一开始想的是去子组件区域,用shouldComponentUpdate来判断URL然后阻止渲染,发现不可行 因为过渡外部用的location.key是随机性的,所以组件每次都会重新渲染 最终的解决方案...,是改掉了侧边栏的Link组件,直接用事件绑定(history.push来跳转),完美 随机切换效果 这个结合CSSTransition的特性,因为location.key是随机性的,不同值都会走一遍...; import { Route, Redirect, withRouter, Switch } from 'react-router-dom'; import styled from 'styled-components

    1.1K10

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

    整体架构设计 路由状态传递 至于在 React 应用中,路由状态是通过什么传递的呢,我们都知道,在 React 应用中, Context 是一个非常不错的状态传递方案,那么在 Router 中也是通过...因为在新的架构中 ,Routes 充当了很重要的角色,在 react-router路由原理 文章中,曾介绍到 Switch 可以根据当前的路由 path ,匹配唯一的 Route 组件加以渲染。...但是在 v6 中,对于配置子代路由进行了提升,可以在子代路由直接写在 Route 组件里,如上将 Child1 和 Child2 直接写在了 /children 的路由下面,那么有的同学会疑问,那么子路由将渲染在哪里...那么就看一下 Layout 中是如何渲染的子代路由组件。...在 v5 版本中,通过 options 到路由组件的配置,可以用一个额外的路由插件,叫做 react-router-config 中的 renderRoutes 方法。

    5.5K41

    React 进阶 - React Router

    ,也需要容器组件通过路由更新,来渲染视图 在 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...Router ,而是使用 React-Router-DOM 中 BrowserRouter 或者 HashRouter ,两者关系就是 Router 作为一个传递路由和更新路由的容器 BrowserRouter...来获取上一级传递来的路由进行路由匹配,如果匹配,渲染子代路由 并利用 context 逐层传递的特点,将自己的路由信息,向子代路由传递下去,这样也就能轻松实现了嵌套路由 四种 Route 使用方式 function

    1.9K21

    前端路由的原理及应用

    在history中跳转 // 在history中向后跳转,与用户点击浏览器的回退按钮效果相同 window.history.back(); // 在history中向前跳转,与用户点击浏览器的前进按钮效果相同...前端路由的应用——react-router 了解到上面提到的两种方式之后,再结合目前前端路由的实际应用,像 react-router, vue-router ,ui.router 这些与前端框架配合使用的路由库...这也是React Router的组件中使用的方法。...这里我就不介绍react-router的使用方法了,可以去这里看看:https://github.com/reactjs/react-router ,也可以阅读下源码,深入理解react-router是如何结合...下面来个例子,看一下 react-router 的使用: import React from "react"; import {render} from "react-dom"; import {Router

    2.3K20

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

    (可以使用相对路径,语法和 JS 相同) 传入-1表示后退 四、动态路由参数 4.1 路径参数 在Route组件中的path属性中定义路径参数 在组件内通过useParams hook 访问路径参数 的正则匹配已被移除。 兼容类组件 在以前版本中,组件的props会包含一个match对象,在其中可以取到路径参数。 但在最新的 6.x 版本中,无法从 props 获取参数。...在父组件中使用Outlet来显示匹配到的子组件 import { Outlet } from “react-router-dom”; function Father() { return ( 在传统的前端项目中,URL的改变意味着向服务器重新请求数据。 在现在的客户端路由( client side routing )中,可以做到编程控制URL改变后的反应。...12.4 NativeRouter 推荐的用于 React Native的Router组件 12.5 StaticRouter 在nodejs端使用,渲染react应用。

    4.5K21

    React 折腾记 - (10) UmiJS 2.x + antd 重写后台管理系统记录的问题及解决姿势

    (nuxtjs既视感) dva(基于redux+redux-saga的封装方案):写起来有vuex的感觉; 主要记录我在过程中遇到的问题及解决的姿势,技术栈 antd 3.11.x + umi 2.x...在封装一些组件的过程,我用了React.Fragment(: 简写)来保证组件同级并列 有些必须需要props.children带上一些属性或者样式来保证我想要的效果....,比如我这边文章就用了; React 折腾记 - (9) 基于Antd+react-router-breadcrumbs-hoc封装一个小巧的面包屑组件 ---- umi 约定式基础鉴权 在layouts...代码没加载之前,显示的区域块, 目前的做法就是自定义模板文件,放在react渲染块内部,在解析代码渲染完毕会被替换掉 效果如下 ?... 复制代码 ---- 标题如何自动随着路由表信息改变 首先得自己维护一份静态路由表,类似vue或者react-router

    3.3K20

    【19】进大厂必须掌握的面试题-50个React面试

    道具是React中Properties的简写。它们是只读组件,必须保持纯净即不变。在整个应用程序中,它们始终从父组件传递到子组件。子组件永远无法将道具发送回父组件。...React中的箭头功能是什么?如何使用? 箭头函数是用于编写函数表达式的简短语法。它们也称为“胖箭头”(=>)函数。这些功能允许正确绑定组件的上下文,因为默认情况下在ES6中自动绑定不可用。...React Router – React面试问题 46.什么是React Router? React Router是一个强大的路由库,建立在React的基础上,可以帮助向应用程序添加新的屏幕和流程。...所述 标签在使用时匹配以在顺序次序中的定义的路由类型化URL。找到第一个匹配项后,它将呈现指定的路线。从而绕过其余 路线。 48.为什么我们在React中需要一个Router?...几个优点是: 就像React基于组件的方式一样,在React Router v4中,API是‘All About Components’。

    11.2K30

    2021前端react高频面试题汇总

    通过this.props.match.params.id 取得url中的动态路由id部分的值,除此之外还可以通过useParams(Hooks)来获取 通过query或state传值 传参方式如:在Link...主题: React 难度: ⭐⭐ Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。...在典型的数据流中,props 是父子组件交互的唯一方式,想要修改子组件,需要使用新的pros重新渲染它。凡事有例外,某些情况下咱们需要在典型数据流外,强制修改子代,这个时候可以使用 Refs。...经常被误解的只有在类组件中才能使用 refs,但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。...props 的行为只有在构造函数中是不同的,在构造函数之外也是一样的。 10:如何 React.createElement ?

    5.4K00

    2021前端react高频面试题汇总

    react-router 实现的思想: 基于 history 库来实现上述不同的客户端路由实现思想,并且能够保存历史记录等,磨平浏览器差异,上层无感知 通过维护的列表,在每次 URL 发生变化的回收,...通过this.props.match.params.id 取得url中的动态路由id部分的值,除此之外还可以通过useParams(Hooks)来获取 通过query或state传值 传参方式如:在Link...主题: React 难度: ⭐⭐ Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。...在典型的数据流中,props 是父子组件交互的唯一方式,想要修改子组件,需要使用新的pros重新渲染它。凡事有例外,某些情况下咱们需要在典型数据流外,强制修改子代,这个时候可以使用 Refs。...props 的行为只有在构造函数中是不同的,在构造函数之外也是一样的。 10:如何 React.createElement ?

    5K20

    2022前端社招React面试题 附答案

    通过this.props.match.params.id 取得url中的动态路由id部分的值,除此之外还可以通过useParams(Hooks)来获取 通过query或state传值 传参方式如:在Link...主题: React 难度: ⭐⭐ Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。...在典型的数据流中,props 是父子组件交互的唯一方式,想要修改子组件,需要使用新的pros重新渲染它。凡事有例外,某些情况下咱们需要在典型数据流外,强制修改子代,这个时候可以使用 Refs。...经常被误解的只有在类组件中才能使用 refs,但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。...props 的行为只有在构造函数中是不同的,在构造函数之外也是一样的。 10:如何 React.createElement ?

    4.8K30

    react-router@4.0 使用方法和源码分析

    react-router-dom@4.3.0 || react-router@4.4.1 react-router 使用方法 配置 router.js import React, { Component...源码解析 下面代码中会移除部分的类型检查和提醒代码,突出重点代码 第一步 Switch react-router function _possibleConstructorReturn(self, call...; }(React.Component); 复制代码 总结:route 渲染的方式: component render children,代码示例用的是component,route 是检查当前组件是否符合路由匹配规则并执行创建过程...history抽象出各种环境中的差异,并提供最小的API,使您可以管理历史堆栈,导航,确认导航以及在会话之间保持状态。...C return hoistStatics(C, Component); }; 复制代码 到这里真个流程基本结束了,这只是react-router的一种使用方式的解析,本文的目的是理解react-router

    40330

    React Router v4 完全指北

    React Router 事实上是React官方的标准路由库。当你在一个多视图的React应用中来回切换,你需要一个路由来管理那些URL。...如果你在开发一个网站,你应该使用 react-router-dom,如果你在移动应用的开发环境使用React Native,你应该使用 react-router-native。...Router之前的版本,在版本4中,嵌套的 最好放在父元素里面。...不像React Router之前的版本,在v4中,一切就“只是组件”。而且,新的设计模式也更完美的使用React的构建方式来实现。...在本次教程中,我们学到了: 如何配置和安装React Router 基础版路由,和一些基础组件,例如 Router>, 和 如何构建一个有导航功能的极简路由和嵌套路由 如何根据路径参数构建动态路由

    2.8K20

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

    今天来和大家解析下React-Router的源码。 ---- React-Router是React生态中最重要的组件之一。 他提供了动态的前端路由功能,能让我们在前端应用实现,高效的SPA应用。...在render中利用了React的Context提供了RouterContext,HistoryContext两个Context信息,供子元素使用。...,都会渲染 这一点也可以在React-Router的官网中得到相应的信息 ?...小结 通过分析源码我们了解到了 React-Router通过监听location变化触发刷新,实现路由更新 利用React的Context机制,实现嵌套路由分析,和状态传递 Route组件中component...,render,children三个属性的渲染机制 所有的机制都在render中,所以能够在渲染时进行动态路由 ---- 参考文档: react-router/packages/react-router

    96330
    领券