react- history.replace -dom v6中的路由器
react-router-dom v6中的路由器是一种用于管理和渲染路由的组件。它是React应用程序中的核心部分，可以帮助开发人员在页面之间进行导航和切换。
概念： 路由器是一个高级组件，它负责将URL与应用程序的不同页面关联起来。它通过匹配URL路径和路由规则，来确定要呈现的组件。路由器还可以处理导航事件，例如链接点击或编程式导航。
分类：
在react-router-dom v6中，路由器被分为两种类型： <BrowserRouter> 和 <HashRouter>。
<BrowserRouter>：这是使用HTML5的history API实现的路由器。它通过将URL路径添加到浏览器的历史记录中，来处理导航事件。<HashRouter>：这是使用URL中的哈希标识符(#)实现的路由器。它通过在URL中添加哈希标识符来处理导航事件。这种类型的路由器适用于不支持HTML5的浏览器或需要在静态文件服务器上部署应用程序时使用。
优势：
- 简化了路由管理：使用路由器可以轻松管理应用程序中的路由，将URL路径与组件关联起来，实现页面之间的导航和切换。
- 支持嵌套路由：路由器允许开发人员创建嵌套路由结构，实现复杂的页面层次结构。
- 提供导航处理：路由器可以处理链接点击或编程式导航事件，使得页面导航更加灵活和可控。
- 支持代码分割：路由器可以与React的代码分割功能一起使用，实现按需加载页面组件，提高应用程序的性能和加载速度。
应用场景：
- 单页应用程序（SPA）：路由器在SPA中起到关键作用，帮助开发人员管理应用程序的页面导航和状态。
- 多页面应用程序（MPA）：路由器也可以在MPA中使用，通过将不同页面映射到不同的URL路径，实现页面之间的导航。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云函数（SCF）：https://cloud.tencent.com/product/scf
- 云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
以上是对react-router-dom v6中的路由器的完善且全面的答案。
相关·内容
当从redux存储发送操作时，我尝试使用react路由器history.push("/")来重定向。当我使用历史记录时，它会替换url，而不会替换内容(组件没有呈现)。
我知道我们可以使用，但它不支持react路由器的v6。
有什么想法，如何可以实现这与自定义路由器或任何裁判？
任何帮助都非常感谢，谢谢
浏览 3提问于2022-02-15得票数 2
useHistory给出了这个错误：
未能编译./src/pages/UserForm/_UserForm.js试图导入错误：“useHistory”未从“react路由器-dom”导出。此错误发生在构建期间，不能取消。
react路由器-dom版本：
4.3.1
代码：
import React, { useState, Fragment } from 'react';
import FormUserDetails from './FormUserDetails';
import FormPersonalDetails from './
浏览 15提问于2020-07-12得票数 244
回答已采纳
我用的是反应性路由器v6，
withRouter不受反应性路由器v6的支持，
以前我在react路由器-v5中使用export default connect(mapStateToProps)(withI18n(withRouter(Main)))。
我正在试图找到相应的道具在反应-路由器v6。
不幸的是，我没有在反应性路由器v6中找到一个同等的道具。withRouter在v6中的等价物是什么？
浏览 5提问于2022-09-15得票数 0
我在我的项目中使用了react-router-dom v6，我只想在管理员删除用户时重新加载管理页面，但不幸的是无法这样做。我找到了一些关于window.location = "current page"或window.location.reload()的建议，还有useNavigate()，但它们在我的例子中都不起作用，我正在使用的一小段代码如下所示 const onDelete = async (id) => {
await deleteUser(id);
window.location="/admin"
}; 附言:删除
浏览 27提问于2020-10-17得票数 0
13回答
使用react- ProtectedRoute的新版本6编写路由器的正确方法是什么？我写了这个，但它不是一条路线
const PrivateRoute = ({ component: Component, ...props }) => {
if (!Component) return null;
return props.isAuthenticated
? <Component />
: <Navigate to={props.redirectLink} /> }
export default PrivateRoute;
浏览 9提问于2020-06-15得票数 16
我正在使用react-router v5，我想升级到v6。有一个问题:我有许多组件，并在其中使用useHistory，但我不想一个一个地将它们更改为useNavigate，而不是编写一个助手函数，用于在react路由器v6中导航(历史)，然后使用该辅助器(包装)函数。
问题是:如何在react路由器useNavigate中为v6编写辅助函数？
谢谢你的帮助!
浏览 12提问于2022-10-17得票数 0
我还没反应过来，已经为这件事挣扎了一小段时间了，我会很感激你的指点。我已经研究过了，但找不到适合我的用例的例子。我读过很多关于类似主题的问题，但是没有一个是关于useMutation的，大多数是关于类和useHistory的。当我尝试使用历史记录时，我会发现push函数不可用的错误。我使用的是反应性路由器-dom v5。
我的react应用程序使用功能组件，它有一个密码重置页面，在成功重置密码后显示芯片消息。我想重定向用户登录页面x秒后，密码被重置。我使用useMutation和mutateAsync作为复位逻辑。一旦成功，我想调用return <Redirect to='/lo
浏览 4提问于2022-07-12得票数 1
import './App.css';
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
浏览 6提问于2022-04-19得票数 3
回答已采纳
我。使用React路由器并在Meteor应用程序上做出反应。我使用OAuth，在OAuth调用到另一个站点之后，该站点用代码重定向到我的URL。例如
然后我读取代码并在我的应用程序中使用它。但是，在获得代码之后，我想从URL中删除代码，以对用户隐藏代码。
我如何在不重新加载的情况下使用React路由器或Javascript来做到这一点？
浏览 3提问于2018-06-29得票数 2
回答已采纳
我安装了react router v6，我想使用一个基于类的组件，在以前的react版本中，路由器-dom v5 this.props.history()在做了一些事情之后为重定向页面工作，但是这段代码不适用于v6。
在react路由器-dom v6中，函数组件有一个钩子useNavigate，但是我需要在类基组件中使用它，请帮助我如何在类组件中导航？
浏览 6提问于2021-11-28得票数 21
在react路由器5中，我可以使用从react路由器6中删除的一个，但我认为它已经被替换了，但是这会给这个使用程序带来一个安全错误。不管出于什么原因。
浏览 4提问于2021-11-17得票数 2
回答已采纳
我已经将我的项目从路由器v5更新到了v6。现在我无法使用queryString.parse(this.window.location)读取URL参数
有方法获取类组件路由器V6中的参数吗？以下是我的密码。
App.js
function App(){
return(
<Routes>
<Route path="/bookingSummary" element={<BookingSummary/>}/>
</Routes>
)}
bookingSummary.js(类组件)
comp
浏览 2提问于2022-08-29得票数 1
2回答
我不能在反应性路由器(特别是react-router-dom). )中使用“交换机”或“路由”。由于对于使用哪一种方法( Switch还是Routes )似乎有点困惑，所以我决定尝试这两种方法，以达到目的。
我使用的是react路由器-dom版本：
"react-router-dom": "^6.2.1",
如果我这样进口：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
编译器说Cannot resolve symbol 'Routes&
浏览 15提问于2022-01-11得票数 5
我想要添加号码regex在五月在反应-路由器-多姆v6。它在v5中像这样工作：
<Route path="list/:id(\d+)" element={<MyComponent/>} />
但它在v6中不起作用。
浏览 8提问于2022-05-07得票数 1
回答已采纳
2回答
我正在做一个谷歌克隆(迷你项目)，为此，我需要从react-router-dom导入react-router-dom。
我遵循以下步骤：
步骤1：npm install --save react-router-dom (我在终端中使用了此命令)步骤2：import { useHistory } from "react-router-dom" (在文件顶部使用此命令)步骤3：const history = useHistory() (在代码中使用此命令)
在执行以下步骤后，我将得到以下错误：
出口'useHistory‘(作为’useHistory‘进口)在’react路
浏览 11提问于2022-10-27得票数 3
回答已采纳
在React路由器v5中，我们可以以这样的方式提供一个404响应代码：
<Route path="*" component={NoMatch} status={404}/>
但是我们如何使用React路由器v6来实现它呢？
浏览 9提问于2021-12-08得票数 3
回答已采纳
在这个v5之后，我从React路由器v6迁移到了v6。我想用测试它，但是我的旧单元测试(在中使用模式)停止了工作。
我的React路由器v6应用程序是这样的
const router = createBrowserRouter([
{
path: "/",
element: (
<>
<SiteHeader />
<Outlet />
</>
),
浏览 13提问于2022-11-11得票数 1
回答已采纳
我以前也问过同样的路由器，但现在它不能与react- question v6一起工作。 我已经将问题简化为单击<Link />时如何输出到控制台？ 侧边菜单组件中的链接 <Link to={"/entity"}>Entity</Link> 来自主app.js的路由 <Routes>
<Route path="/entity" element={<Entity />} />
</Routes> 如何在第二次单击链接时执行操作(页面已经显示)此示例仅在单击<Link&
浏览 25提问于2021-11-13得票数 1
回答已采纳
我已经安装了react路由器v6，但是WebStorm仍然使用react路由器v5类型。
在WebStorm文件夹中：/Webstorm2021.2/javascript/typings/...有loadsh、react-dom、react-router-dom、styled-components库。当我删除那些类型文件夹时，WebStorm自动创建并下载这四个库。
为什么会发生这种情况，以及如何制止这种情况？还是让WebStorm默认选择v6类型？
浏览 3提问于2021-11-22得票数 8
回答已采纳
在此之前，您需要包装类似这个export default withRouter(name of component)的东西，而现在它在react路由器v6上已经不同了。
我有一个按钮，一旦您单击此按钮，它将带您到另一个页面，包括我的tableMeta.rowData[0]中的值。我试过使用navigate = useNavigate()，但不知道如何传递tableMeta.rowData[0]的值
{
name: "Edit",
options: {
customBodyRender: (value, tableMeta, upda
浏览 5提问于2022-02-13得票数 3
回答已采纳
在react路由器V6中，我们以这种方式编写路由-
<BrowerRouter>
<Routes>
<Route path="..." element={<div> ... </div>} />
<Route path="..." element={<div> ... </div>} />
</Routes>
</BrowerRouter>
现在，如果我想插入一个依赖于道具的元素，比如一个名称数组(定义为另一个组件)，那
浏览 3提问于2022-04-19得票数 -1
回答已采纳
当我使用console.log qty (在下面的代码中)时，我看到No routes matched location "/cart" (来自浏览器控制台)而不是qty的值。在v5中，通过将位置作为道具传递给组件，一切都运行得很好，但这在v6中不起作用。以下代码块在路由器-dom v5中工作：
export function CartScreen({ match, location, history}) {
const qty = location.search ? Number(location.search.split("=")[1]): 1
浏览 9提问于2021-12-23得票数 2
回答已采纳
我是react.js的新手，我使用的是react.js路由器-dom v6，并且我在一个主题上发现了在URL中#的一个问题。
示例：-{url}/#/仪表板
我要示例：- {url}/dashboard
浏览 5提问于2022-09-13得票数 0
回答已采纳
1回答
在React路由器v5中，中有一个组件，您可以使用该组件将用户从一个路由重定向到另一个路由，如下所示：
import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
// ...
function App() {
// ...
return (
<div>
<Header />
<Switch>
<Route path="/" elem
浏览 1提问于2022-06-11得票数 0
请帮助我处理这个试图导入错误的错误：“导航”不是从‘react路由器-dom’导出的-路由器-dom版本是4.1.1，请不要告诉我如何更新到5v或v6，因为在这个版本中，我面临许多错误，所以请告诉我如何在4.1.1版本的help路由器-dom中修复这个错误：‘导航’不是从‘react路由器-dom’导出的。您还可以看到错误的img。
我这里的代码
import { Navigate, useLocation } from "react-router-dom";
import { useAppSelector } from "../app/hooks";
浏览 2提问于2022-07-29得票数 0
回答已采纳
你好，我是新的反应开发和最近的反应路由器已经更新到v6，这造成了很多问题，当我试图创建一个管理路由。例如，在v5中，我使用了。<AdminRoute精确path={${path}/makeAdmin}>，但它在v6中不工作。请帮帮我。
浏览 1提问于2022-01-04得票数 2
回答已采纳
在从es2015升级到第207版后，我的browserHistory.goBack都停止工作了。
在尝试了网上发现的几乎任何东西之后，我仍然无法让它发挥作用。
代码：
import { goBack } from 'react-router-redux'
let Popup = () => {
<a onClick={ goBack }></a>
}
与browserHistory.goBack的工作原理完全相同。相反，goBack什么也不做。
<Provider store={store}>
<Ro
浏览 1提问于2017-03-21得票数 2
1回答
在最新的react-路由器v6中，useHistory()钩子已经被useNavigate()取代了，我想让action对象知道，它是'Push'或'Pop'状态，useHistory有这个对象，但是在最新的v6中，我找不到可以让任何人来引导我的对象，我需要这个动作状态来无缝地定义动画。
提前感谢！
浏览 2提问于2022-05-27得票数 4
1回答
我想从一个组件转到另一个组件，直接滑到其中的html标记。
使用react路由器v6
<Route path="/mypage/#c" element = {<MyPage/>} />
( #c是/mypage中html标记的id )
但我提供的代码不起作用。
它只会转到页面上，不会滑到标签中。
浏览 1提问于2022-09-26得票数 2
我正在使用react路由器V6，并试图测试useOutletContext的新特性。我的测试库正在测试-库/react，我不知道如何在测试中传递上下文数据。
在TSX组件中，我使用router路由器的钩子获取数据：
const { data } = useOutletContext<IContext>()
我需要这样的东西：
test("render outlet context data view", async () => {
const { getByTestId } = render(
<MockedProvider mocks={[
浏览 44提问于2021-12-28得票数 2
我目前正在从v5迁移到v6。我有一个用例，在该用例中，我希望在用户试图关闭浏览器选项卡或警告用户未保存的更改之前显示确认。当用户正在填写申请表格并决定退出时，我想警告他，存储的数据将丢失；对于现有用户，如果他已经注册并登陆仪表板，并希望关闭选项卡或想回到以前的路径，在这种情况下，我希望提醒他注销或继续。在此之前，我使用CRA和react路由器dom v5，下面是我用来实现上述结果的代码：
import React, { useEffect, useState } from "react";
import { Prompt } from "react-router-dom
浏览 5提问于2022-12-04得票数 0
1回答
我以前使用了React路由器DOM v4，如下所示：
componentDidUpdate(prevProps) {
if ((prevProps.match.params[0] !== this.props.match.params[0])) {
...some code
}
}
componentDidUpdate(prevProps) {
if (this.props.location.pathname !== prevProps.location.pathname){
this.loadContent();
}
}
我应
浏览 2提问于2022-07-01得票数 0
回答已采纳
我正在尝试使用React路由器和路由，但是不断地得到这个错误：
我尝试了以下几点：
删除和重新安装react-router.deleting --路由器-dom和node_modules文件夹，并运行npm安装以确保react路由器和react-dom是相同的版本是的，我在上面列出的每一次尝试之后都重新启动了服务器。
以下是我的index.js代码：
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App fr
浏览 6提问于2021-06-08得票数 8
回答已采纳
1回答
我想刷新页面上的点击使用反应路由器。
我知道，我可以用window.location.reload();
但我想使用一些魔法从反应路由器。有一种方法可以使用React路由器刷新页面，还是应该使用窗口对象中的正常方法？
浏览 5提问于2022-08-03得票数 0
回答已采纳
我有一个bootstrap+react主题，它使用react路由器1.x和hashHistory，我想删除哈希，所以遵循这个。最初，我试图在拥有1.x版本的时候做到这一点，但我无法做到这一点，所以我决定将react路由器升级到2.x。安装了react-路由器2.x之后，这个应用程序工作了，因为它仍然在使用hashHistory，但是当我用browserHistory替换它时：
它显示了一个灰色的屏幕
应用程序的HTML中只有<noscript data-reactid=".0"></noscript>标记。
React Developer工具
浏览 1提问于2016-05-20得票数 4
我能得到帮助吗?事实上，我将我的反应性路由器-dom升级为V6，所以我修复了主url，它可以工作，但是带有嵌套链接的url没有
示例/about工作，但/about/1不
代码：
浏览 10提问于2022-01-25得票数 -3
回答已采纳
我遇到了以下错误，无法找到出路。有人能帮忙吗？
导出‘开关’(作为‘开关’导入)没有在‘react路由器-dom’中找到(可能的出口: BrowserRouter、HashRouter、Link、MemoryRouter、NavLink、导航、出口、路由、路由器、路由、UNSAFE_LocationContext、UNSAFE_NavigationContext、UNSAFE_RouteContext、createRoutesFromChildren、createSearchParams、generatePath、matchPath、matchRoutes、renderMatches、res
浏览 14提问于2022-02-07得票数 4
1回答
如何在新的react路由器版本6中使用url螺旋桨(和其他道具)并将其传递给元素的组件，就像在呈现方法中所做的那样？
react路由器: V6
<Route path="/dashboard" element={<Dashboard/>}/>
react路由器: V5
<Route exact path="/ds/:id" render={(url) => <Header url={url}/> }/>
浏览 1提问于2022-02-04得票数 0
在从React路由器Dom v5切换到v6后，我遇到了一个问题。
我遇到了一个我无法解决的错误。
Uncaught :无法破坏“匹配”的属性“路径”，因为它是未定义的。
以下是我的app.jsx的样子
...
import { Home } from "home";
import { Listings } from "listings";
import { Navigate, Route, Routes, unstable_HistoryRouter as Router } from "react-router-dom";
...
impor
浏览 13提问于2022-05-21得票数 0
2回答
当我试图将反应性路由器-dom v5升级到v6时，我会得到类型记录错误，我如何修复这个类型记录错误。在下面您可以找到代码，谢谢
`
export function withRouter(ui: React.ReactElement) {
const history = useNavigate();
const routerValues: any = {
history: undefined,
location: undefined
};
const result = (
<MemoryRouter>
{ui}
<
浏览 18提问于2022-12-04得票数 2
我正在尝试将旧的反应性路由器dom代码迁移到v6，我想知道如何侦听路由更改，我现在正在使用useHistory。
const history = useHistory()
//then
history.listen(...)
我确实读过新的文档，发现useHistory被更改为useNavigate。
const navigate = useNavigate()
//then
navigate.listen(...) // listen is not a function
你能帮我找个办法听v6的路线改变吗？
// This is a React Router v6 app
import {
浏览 13提问于2022-01-09得票数 23
回答已采纳
1回答
我试图修改当前历史对象的条目，而不是创建一个新的条目，但是我得到了这个错误。
history.replace不是一个函数
//My attempts were:
import { Switch, Route, Redirect } from 'react-router-dom';
history.replaceState( position );
history.replace( null, position );
我使用的是“反应路由器”的版本^16.13.1“。
浏览 1提问于2020-06-21得票数 1
回答已采纳
我们使用我们自己的内部路由组件来跟踪react-router-dom v5的路线。看上去大概是这样的：
import { Switch, Route } from 'react-router-dom';
// EDIT: This was React-Router v5 code, in v6 <Switch> is replaced by <Routes>
// and <Route component={}> is replaced by <Route element={}>
const routes = ()
浏览 35提问于2022-08-29得票数 2
回答已采纳
我正在尝试在react-router v6中将"/admin/posts/new“检查为"/admin/*”。我发现有一个matchRoutes函数 import { useLocation } from "react-router";
const { pathname } = useLocation();
const isAdminPath = someMatchFunc(pathname,"/admin/*") <<<< something goes here returns true or null
浏览 75提问于2020-04-16得票数 0
在react路由器V5中，您可以使用
history.push('/login?redirect=other_page')
将用户重定向到'/login'或'/other_page' (如果已经登录)
反应路由器V6与useNavigate的等价性是什么？
navigate('/login?redirect=other_page')
不像预期的那样工作。
当用户登录时，它返回路径'/login/other_page'而不是'/other_page'。
浏览 1提问于2022-01-18得票数 1
回答已采纳
我正在尝试在我的react js App中实现重定向，这样如果API调用返回的状态不是200，我就可以将用户重定向到相应的页面。问题是重定向不起作用。到目前为止我的代码如下： function catchErr(res) {
try {
if (res.status === 200) {
return res.json();
} else if (res.status === 404) {
<Redirect to="/404" // doesn't redirect to thi
浏览 35提问于2021-04-09得票数 1
我试图使用标签滚动到页面的一部分。例如：
<Link to="/#first">Go</Link>
...
<div id="first">The first section</div>
这似乎不适用于react路由器v6。我找到的解决方案都是针对早期版本的react路由器。
我已经发现，我可以使用reloadDocument强制重新加载，这将工作，但我希望实现一个平滑滚动到元素，如果来自同一个页面。我会使用参考文献，但我需要能够从其他页面链接到这些部分。
浏览 2提问于2022-04-11得票数 1
下面的代码在react路由器dom v6中不工作。
<Route path='/study-board' element={<StudyBoard />}>
<Route path=':id' element={<StudyBoardDetail />} />
</Route>
但下面的代码起作用了。
<Route path='/study-board/:id' element={<StudyBoardDetail />} />
你能告诉我原因吗？
浏览 1提问于2022-05-08得票数 0
回答已采纳
当使用react路由器v5时，我可以获取url和路径并将其传递给子组件。
在ParentComponent中
const { url, path } = useRouteMatch();
<ChildComponent url={url} path={path} title="child" />
在ChildComponent中
<Switch>
<Route path={url}>
<div>These will show up</div>
</Route>
</Switch&g
浏览 4提问于2022-07-19得票数 1
回答已采纳
编译时出现了以下问题:在./src/ with /AppRoute.js 12:37-43导出“交换机”(导入为“Switch”)中没有发现“react路由器”(可能的出口: MemoryRouter、导航、出口、路由、路由器、路由、UNSAFE_LocationContext、UNSAFE_NavigationContext、UNSAFE_RouteContext、createRoutesFromChildren、generatePath、matchPath、matchRoutes、renderMatches、resolvePath、useHref、useInRouterContext、u
浏览 8提问于2021-12-22得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
