“您不应该在<Router>之外使用<Route>或withRouter()”--但我在路由器上

不太明白您在句末提到的“但我在路由器上”具体指的是什么意思。在这个问答内容中，我们先来看一下问题本身：

问：您不应该在<Router>之外使用<Route>或withRouter()

答：在React Router库中，<Router>是整个路由器的根组件，而<Route>是用来声明路由匹配规则的组件。在使用React Router时，确保在使用<Route>或withRouter()组件时，它们必须被包裹在<Router>组件之内。

更详细地解释，<Router>组件是React Router库的核心组件，它提供了路由器的基本功能，包括了路由匹配、导航等功能。在一个应用中，<Router>组件只能有一个，并且应该作为整个应用的根组件。

<Route>组件用于定义路由匹配规则，它可以根据指定的路径来渲染对应的组件。使用<Route>组件时，需要将其包裹在<Router>组件内部，以确保它能够正常工作。

withRouter()是一个高阶组件（Higher Order Component），它可以将当前路由信息注入到包裹的组件中，使得该组件可以访问到路由相关的属性和方法。同样地，使用withRouter()也需要将其包裹在<Router>组件内部。

综上所述，确保在使用<Route>或withRouter()时，它们必须被包裹在<Router>组件之内。这样才能保证路由器能够正常工作，正确匹配路由并渲染对应的组件。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（Elastic Cloud Server）：链接地址
腾讯云云原生容器服务（Tencent Kubernetes Engine）：链接地址
腾讯云人工智能（AI）服务：链接地址
腾讯云物联网开发平台（Tencent IoT Explorer）：链接地址
腾讯云移动推送服务（Tencent Push Notification Service）：链接地址
腾讯云对象存储（Tencent Cloud Object Storage）：链接地址
腾讯云区块链服务（Tencent Blockchain as a Service）：链接地址
腾讯云腾讯会议（Tencent Meeting）：链接地址
腾讯云直播（Tencent Live Video Broadcasting）：链接地址

请注意，以上只是腾讯云相关产品的一些示例，并不代表全部产品。同时，也请注意在实际应用中，根据具体需求和场景选择适合的云计算服务提供商。

相关·内容

React withRouter的使用

使用withRouter首先，确保您已经安装了react-router-dom库：npm install react-router-dom接下来，让我们看一个使用withRouter的示例：import...React from 'react';import { BrowserRouter as Router, Route, Link, withRouter } from 'react-router-dom...在Navbar组件中，我们通过props获取了location属性，它是由withRouter注入的。通过使用withRouter将Navbar组件包裹起来，我们可以在非路由组件中获取路由相关的属性。...注意事项使用withRouter时，需要注意以下几点：withRouter应该在组件的外部使用，而不是在组件的内部使用。...例如，const NavbarWithRouter = withRouter(Navbar)，而不是在组件的内部使用withRouter(Navbar)。

7341 0

测开技能--Web开发 React 学习（十八）

那么怎么重定向呢，可以使用Redirect，需要引入下，在路由中，然后如下实现。...import React from "react"; import { HashRouter as Router, Switch, Route, Link,NavLink...,Redirect } from "react-router-dom"; export default class Project extends React.Component{ state...没有被直接在路由器包括可以使用withRouter import { withRouter } from "react-router"; 方案，既可以实现。...export default withRouter(ShowTheLocation); 有文字，跳转怎么给提示呢 export default class Project extends React.Component

8642 0

（重磅来袭）react-router-dom 简明教程

Hook(v16.8以上才能够使用), 可以使用react-router-dom提供的withRouter高阶函数 import React from "react"; import { withRouter...在to中为模式提供了所有匹配的URL参数。必须包含to中使用的所有参数。不被to使用的其他参数将被忽略。...strict属性：路径匹配是否严格，区分斜杠 sensitive属性: 路径匹配是否大小写敏感 Route 路由组件可能是反应路由器中最重要的组件，了解和学习使用好。...as ({ match }) => () 路由children函数中解构出match对象Route children as ({ match }) => () withRouter高阶函数包裹组件中使用...它主要用于在不实际呈现的情况下访问匹配数据 import { Route } from "react-router-dom"; function BlogPost() { return

12K1 0

React路由

导入路由的三个核心组件，它们是组件 import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 使用Router...，因此改变 hash 不会重新加载页面，在处理相对路径方面的一些问题时，使用HashRouter可以解决。 ...在 react-router-dom的6.x版本中，“Switch”被替换为了“Routes”，需要更新导入语句 import { Switch, Route } from "react-router-dom...push(path)：跳转到某个页面，参数path表示要跳转的路径 go(n)：前进或后退到某个页面，参数n表示前进或后退页面数量(比如:-1表示后退到上一页) 为什么是从props上拿到history...一般组件的props上的history是undefined，无法使用编程式导航的api。

2.6K1 0

react-live-route(react的组件缓存)使用

太坑了，于是乎，找到了react-live-router，完美解决我们的问题：下面是是使用方法： 1.下载库： npm i react-live-route 2.在外面的routes中配置使用不需要改变我们之前的...这也是我选择使用这个库的原因, import { Route, Redirect, withRouter, Switch } from "react-router-dom"; import NotLiveRoute... from "react-live-route"; const LiveRoute = withRouter(NotLiveRoute); 3.引入好了之后，可以直接添加在注意：需要添加在Switch...： livePath livePath 为需要隐藏的页面的路径，具体规则与 react-router 中的 Route 的 path props 一样，使用 component 或 render 来渲染路由对应的组件...> 注意存在的一个BUG：使用了react-live-route 路由缓存之后，再使用import lazy懒加载引入路由会造成bug （缓存的路由和其它的路由同时存在）大概的开箱使用说明就这么多

1.1K1 0

react-router学习笔记

History React Router 是建立在 history 上的，简而言之，一个 history 知道如何去监听浏览器地址栏的变化，并解析这个 URL 转化为 location 对象，然后...但我们想全部的 history 都能够使用location state，因此我们要为每一个 location 创建一个唯一的 key，并把它们的状态存储在 session storage 中。...帮你完成这点) 为了迎合这一需求，你要在 API 下一层使用：使用 match 在渲染之前根据 location 匹配 route 使用 RoutingContext 同步渲染 route 组件...组件中添加一个静态的 load 方法，或如在 route 中添加数据加载的方法——由你决定。...在组件外部使用导航组件内部导航使用 this.context.router，外部的使用 history 实现组件外部的导航。

2.7K1 0

React Router 进阶技巧

本文介绍在工程中经常用到的 react-router 的技巧： ?️ 如何在 TypeScript 中使用？ ?️exact和strict的区别？ ?️ 如何封装路由配置组件？ ?️...的方法已经被注册到了Props上 }; render() { // ... ); } } export default withRouter(Navigation);...可以直接使用 react-router-config 组件。...在 VueJS 技术栈中，vue-router 是提供路由响应的钩子函数，例如：beforeEach、afterEach等等。...(Navigation); 在 React17 之后，不推荐使用componentWillReceiveProps等不确定的生命周期。

2.5K2 0

React登录跳转遇到的问题

上图很清楚，有问题直接评论 2.方法二当然，v4上 BrowserRouter 提供了 hisotry 对象，所以有了方法二.可以使用withRouter;API文档：https://reacttraining.com.../react-router/web/api/withRouter 1.路由代码，使用BrowserRouter ...... import {BrowserRouter, Route, Switch...> <Route...this.props.history.push('/') }else if(req === 'error'){ message.error('用户名或密码错误...} from 'react-router-dom' ...... export default withRouter(Form.create({ mapPropsToFields(props) {

1.8K2 0

react-router4

https://github.com/ReactTraining/react-router github 三、react-router有3种使用场景 React Router被拆分成三个包：react-router...或者HashRouter进行包裹，一般我们将BrowerRouter和HashRouter包裹在最外层APP组件上，但是route内部嵌套就不需要BrowserRouter和HashRouter包裹了。...上，加上以后路由绝对相等才会去匹配高阶组件: withRouter 在我们使用Route组件时...当我们没有使用Route组件时，我们想要使用这些props，这时我们需要使用高阶组件withRouter，之后我们就可以使用 match, location, history 这些API了。

1.5K3 0

React 进阶 - React Router

，也需要容器组件通过路由更新，来渲染视图在 History 核心基础上，增加了 Router ，Switch ，Route 等组件来处理视图渲染 React-Router-DOM 在 React-Router...基础上，增加了一些 UI 层面的拓展比如 Link ，NavLink 在 React-Router 基础上，增加了两种模式的根部路由 BrowserRouter ，HashRouter # history...HashHistory 模式改变路由 window.location.hash 通过 window.location.hash 属性获取和设置 hash 值在哈希路由模式下的应用中，切换路由，本质上是改变...整个应用路由的传递者和派发更新者一般不会直接使用 Router ，而是使用 React-Router-DOM 中 BrowserRouter 或者 HashRouter ，两者关系就是 Router...进行渲染通过 Switch 包裹后，那么页面上只会展示一个正确匹配的路由 Redirect Redirect 可以在路由不匹配情况下跳转指定某一路由，适合路由不匹配或权限路由的情况注意 Switch

1.9K2 1

react-router 入门笔记

' component={subPage}> ) 命令式导航(history) 命令式导航，通过history上的方法实现...为props 添加 history 参数, 在组件内部获取路由相关的参数，及控制路由动作 withRouter 对于 Route 绑定的组件，组要是页面，本身已经将路由接口包裹在props中, 而其他组件想获取路由接口需要通过...withRouter(compoent) 处理. withRouter 处理的组件必须包裹在标签中s, 也就是说, 子组件中路由参数等，来自于包裹的 Router 对象 // 使用...参考: React router的Route中component和render属性的使用 children 无论路径是否匹配都将被渲染，不同的是, 对于已匹配的路径，children 组件内将获取到...match 参数自定义history 一般在浏览器使用的路由为 BrowserRouter，该路由是封装后的Router，提供了默认的history，所以该路由没有history 接口，我们可以使用

1.6K2 0

SSR服务器端渲染(Next.js总结和豆瓣电影项目)「建议收藏」

的JSX和ES6的module，模块化和维护更方便可以运行在Express和其他Node.js的HTTP 服务器上可以定制化专属的babel和webpack配置使用Next服务器端渲染好处：对SEO...高阶组件,在withRouter()方法里将组件传递过去,然后在props.router.query.id里得到传递过来的参数(重要:withRouter可以获取url里的参数) import {...withRouter} from 'next/router'; const Detail=withRouter((props)=>{ console.log(props); return ( 这是{ props.router.query.id}老师详情页面 ) }) export default Detail; 如果不引入withRouter是得不到query这个属性,所以在...注意：getInitialProps 不能在子组件上使用，只能使用在pages文件夹的页面中进行调用。

2.2K4 0

react-router 的使用与优化

除了 Route 组件之外，还有一种组件 Switch，顾名思义，可以进行切换，它里面包裹的也应该是 Route 组件。...在 Route 组件中除了使用 component 指定一个组件外，还可以使用 render 函数，这个函数返回一个 React 组件，表示路由要渲染的内容： <Route exact path="/"...没有通过路由绑定的组件，props 中是没有路由信息的，可以使用 withRouter 函数来让组件获得路由信息。当一个组件不是通过路由跳转而展示出来时，这个组件的 props 上就没有路由信息。...上面代码中，App 组件的 props 也是没有路由信息的，也可以使用 withRouter 方法去包裹。...当在浏览器上渲染一个组件时，浏览器历史记录会改变状态，同时将屏幕更新。在静态的服务器环境中，无法直接更改应用程序的状态。

3.2K1 0

React路由及 React 路由中核心组件

Switch 组件 Redirect 组件 withRouter 组件 React 路由 react-router路由路官网安装: npm install react-router-dom...SPA单页面应用: Single Page Application : 单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容...前端路由前端路由只是改变了 URL 或 URL 中的某一部分，但一定不会直接发送请求，可以认为仅仅只是改变了浏览器地址栏上的 URL 而已，JavaScript 通过各种手段处理这种 URL 的变化...React项目中使用的 React Router 库 React Router 提供了多种不同环境下的路由库 Web native 基于 Web 的 React Router 基于 web...Link 组件 Link 组件用来处理 a 链接类似的功能（它会在页面中生成一个 a 标签），但设置这里需要注意的，react-router-dom 拦截了实际 a 标签的默认动作，然后根据所有使用的路由模式

1.4K2 0

hippy-react 三端同构 — 路由

但是 Navigator组件有比较大的局限性，该组件通过启动一个新的 Hippy 实例实现，在 2.0 下实例之间可能无法互相通信，iOS 上也必须作为根节点包裹所有子组件，使用有很大限制。...因此使用 react-router 可以同时支持原生和web页面切换，进行多页面开发 2.1 hippy中react-router使用通过 Platform.OS 对当前平台进行判断在原生项目中使用...} } 3. hippy-react三端同构router使用 3.1 使用 react-router 存在的问题 react-router 能够在一定层度上解决 hippy 中多页面跳转的功能...如 goback, push，传递给组件当组件需要使用到 react-router 功能时，通过 withRouter 高阶组件，向组件注入路由跳转函数 // withRouter 使用方式 //...的源码分析来看，其中 context 包含了 router 所有的方式，提供给组件使用，因此可以在 context 这一层，按照不同的平台，进行个性化处理 * **解决方案** 通过实现 withRouter

2.8K5 1

react路由传参的几种方式

1、 ‘当复杂数据对象或数组需要传参时，这样做比较麻烦，需要通过json字符串的方式进行处理’ 2、多个参数的传递不方便 3、参数会出现在url上，不够安全动态路由一般都是用来传递某个唯一的值，比如详情或编辑的...在react中，最外层包裹了BrowserRouter时，不会丢失,但如果使用的时HashRouter，刷新当前页面时，会丢失state中的数据第四种传参方式组件间传参何时使用？...高阶组件给子组件绑定路由参数 withRouter 何时使用？...为了解决不通过route标签绑定的子组件获取路由参数的问题，需要使用withRouter 一般用在返回首页，返回上一级等按钮上 import React from 'react'; import BackHome.../必须在使用withRouter的情况下，该组件在this.props中才有路由参数和方法 //否则，会报错 this.props.history.push({ pathname

3K1 0

React-Router-手动路由跳转

您将学习如何使用React Router提供的useHistory或useNavigate钩子（或者类似的方法，取决于您的React Router版本）来获取路由导航的函数，并如何在组件内部触发路由跳转...我们还会讨论如何传递参数或状态给目标路由。手动路由跳转不通过 Link/NavLink 来设置资源地址, 而是通过 JS 来设置资源地址。.../components/Discover'import {BrowserRouter, HashRouter, NavLink, Route, Switch} from 'react-router-dom...history 对象, 那么可以借助 withRouter 高阶组件，只要把一个组件传递给 withRouter 方法, 那么这个方法就会通过路由将传入的组件创建出来，如果一个组件要使用路由创建, 那么这个组件必须包裹在.../components/Discover'import {NavLink, Route, Switch, withRouter} from 'react-router-dom';class App extends

3973 0

React-Router

react-router-native是用于原生应用的。 react-router是核心部分。react-router-dom提供了浏览器使用需要的定制组件。...比如pop、replace或push。 location - object类型，表示当前的位置。...在withRouter中，以this.props.location的方式获取。...BrowserRouter组件提供的属性： basename - string类型，路由器 的默认根路径。 forceRefresh - bool类型，在导航的过程中整个页面是否刷新。...replace属性设置为true时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。设置为false时，点击链接后将在原有访问历史的基础上添加一个新纪录。

2.4K2 0

无废话快速上手React路由

并在 Route 组件的匹配路径上通过 :参数名的方式接收参数，代码如下： import { BrowserRouter as Router, Route, NavLink, Switch.../about' function App() { return ( {/* 在 /home 的路径上携带了...此时，react-router-dom 提供了一个 withRouter 方法，可以使普通组件也能像路由组件一样有那些方法或数据可以使用使用方法如下： import { BrowserRouter...as Router, Route, NavLink, Switch, withRouter, // 1....通过withRouter方法对普通组件做一层包装处理补充 replace 在函数式路由里跳转类型主要有两种，分别是 push 和 replace，那么在非函数式路由中，同样也可以自定义跳转类型，具体的实现代码如下

1.8K2 0

React 代码共享最佳实践方式

React官方在实现一些公共组件时，也用到了高阶组件，比如react-router中的withRouter，以及Redux中的connect。在这以withRouter为例。...高阶组件中的withRouter作用是将一个没有被Route路由包裹的组件，包裹到Route里面，从而将react-router的三个对象history、location、match放入到该组件的props...： import React, { Component } from "react" import { withRouter } from "react-router" class TopHeader...,location等 export default withRouter(TopHeader) 由于高阶组件的本质是获取组件并且返回新组件的方法，所以理论上它也可以像mixin一样实现多重嵌套。...Render Props— Render Props是一种非常灵活复用性非常高的模式，它可以把特定行为或功能封装成一个组件，提供给其他组件使用让其他组件拥有这样的能力。

3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云