首页
学习
活动
专区
工具
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 历史记录保存在内存 (不读取、不写入地址栏)。测试和非浏览器环境很有用,如 React Native。

    2.7K20

    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.1K41

    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

    ,也需要容器组件通过路由更新,来渲染视图 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 NativeRouter组件 12.5 StaticRouter nodejs端使用,渲染react应用。

    4.1K21

    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面试

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

    11.2K30

    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

    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

    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.7K30

    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

    39530

    React Router v4 完全指北

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

    2.8K20

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

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

    95930
    领券