REACT路由器V6无法在另一个路由器内呈现路由器
REACT路由器V6是一个用于构建单页面应用程序的路由库。它提供了一种将不同的组件与特定URL路径相关联的方式，以便在用户导航时动态地加载和呈现这些组件。
在REACT路由器V6中，无法在另一个路由器内呈现路由器的问题可能是由于以下几个原因导致的：
- 嵌套路由器的使用错误：在REACT路由器V6中，嵌套路由器是通过将一个路由器组件放置在另一个路由器组件的子组件中来实现的。如果无法在另一个路由器内呈现路由器，可能是由于嵌套路由器的使用方式不正确导致的。请确保正确地将路由器组件嵌套在另一个路由器组件的子组件中。
- 路由器配置错误：在REACT路由器V6中，路由器的配置是通过使用
<Routes>组件来定义的。如果无法在另一个路由器内呈现路由器，可能是由于路由器的配置错误导致的。请检查路由器的配置，确保正确地定义了需要呈现的路由和对应的组件。 - 路由器版本不兼容：如果使用的是较旧的REACT路由器V6版本，可能存在一些已知的问题或限制，导致无法在另一个路由器内呈现路由器。请尝试升级到最新版本的REACT路由器V6，以确保使用的是最新的功能和修复的问题。
总结起来，要解决REACT路由器V6无法在另一个路由器内呈现路由器的问题，需要确保正确地使用嵌套路由器、正确配置路由器，并且使用最新版本的REACT路由器V6。如果问题仍然存在，建议查阅REACT路由器V6的官方文档或社区论坛，寻求更详细的帮助和解决方案。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云服务器（CVM）：提供可扩展的云服务器实例，用于部署和运行应用程序。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端对象存储服务，适用于存储和管理各种类型的数据。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：提供丰富的人工智能服务和工具，包括图像识别、语音识别、自然语言处理等，帮助开发者构建智能化应用。详情请参考：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：提供全面的物联网解决方案，包括设备接入、数据管理、应用开发等，帮助实现设备互联和数据智能化。详情请参考：https://cloud.tencent.com/product/iot
相关·内容
下面的React路由代码可能在React路由器v5中工作，但给出了React路由器v6中的以下错误
错误: Player不是<Route>组件。<Routes>的所有组件子组件必须是<Route>或<React.Fragment>
是否有可能更新路由/路由代码以使其在React路由器v6中工作？
function App() {
// Some stuff here...
const { players, offlinePlayers } = usePlayers();
return (
<ThemeProvid
浏览 8提问于2022-03-03得票数 3
回答已采纳
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
我安装了"react-router-dom": "^6.0.0-beta.0"并创建了一些页面路由。如果不存在页面，则Page404 / NotFound组件将无法工作。由于某些原因，当我使用动态页面/post slug时，如果没有带有此ID的页面/帖子，组件NotFound将无法工作。
在React路由器中是否有解决此问题的选项？
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import AllPosts from "compon
浏览 3提问于2021-03-08得票数 1
App.js
import React, {Component} from 'react';
import './App.css';
import About from './about';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div cl
浏览 5提问于2022-02-26得票数 2
回答已采纳
我安装了react router v6，我想使用一个基于类的组件，在以前的react版本中，路由器-dom v5 this.props.history()在做了一些事情之后为重定向页面工作，但是这段代码不适用于v6。
在react路由器-dom v6中，函数组件有一个钩子useNavigate，但是我需要在类基组件中使用它，请帮助我如何在类组件中导航？
浏览 6提问于2021-11-28得票数 21
你好，在react路由器dom v5中，我可以在redux中获得params。示例代码如下：
1-传递参数
<Route path="/saveproduct/:productId" component={AddOrUpdateProduct} />
2-在redux中获得平行线。我可以把productId放在ownProps里面
function mapStateToProps(state, ownProps) {...
但是当我在v6中调用路由时，我无法在ownProps中获取productId
浏览 4提问于2021-12-18得票数 1
回答已采纳
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
我用的是反应性路由器v6，
withRouter不受反应性路由器v6的支持，
以前我在react路由器-v5中使用export default connect(mapStateToProps)(withI18n(withRouter(Main)))。
我正在试图找到相应的道具在反应-路由器v6。
不幸的是，我没有在反应性路由器v6中找到一个同等的道具。withRouter在v6中的等价物是什么？
浏览 5提问于2022-09-15得票数 0
2回答
我试图滚动到每一个页面的顶部，使用v6进行更改。代码只在我的主页上滚动，而不是在我的字符详细信息页面上滚动。我已经尝试过许多解决方案，但无法使它们发挥作用。我用的是“react路由器-dom”："^6.2.2"，
这就是我到目前为止所取得的成就：
ScrollToTop.js：
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop({ children }) {
浏览 3提问于2022-04-02得票数 1
2回答
我试过使用路由器，但它不起作用。我已经知道React路由器Dom v6已经从切换到路由，但是当我运行程序时，它只是显示一个空白的屏幕。有人知道怎么解决这个问题吗？这是我的代码：
routerURL.js
import React, { Component } from "react";
import { BrowserRouter as Route, Router } from "react-router-dom";
import Contact from "../component/Contact";
import Details from &
浏览 16提问于2022-01-05得票数 3
我试图将其移植到v6，但是，似乎没有正确地获得语法。当使用react路由器v5时，这段代码工作得很好.
例如，我知道路由语法会发生变化。
Urls.js
import React from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import Login from "./components/Login";
import Home from "./components/Home";
// A wrap
浏览 4提问于2022-01-03得票数 -1
回答已采纳
1回答
我正在尝试完成本教程，但由于reach/路由器与react 17不兼容，我遇到了一个障碍。
然而，作为一个初学者，我不够精通，不足以理解它包含了什么。
本教程的源代码如下：
import React from "react"
import { Router } from "@reach/router"
import { Link } from "gatsby"
const Home = () => <p>Home</p>
const Settings = () => <p>Settings<
浏览 4提问于2021-12-13得票数 3
回答已采纳
3回答
在我的ReactJS应用程序中，我使用了作为路由。我希望阻止用户在登录后返回，也就是说，当用户在登录后点击浏览器上的后退按钮时，我不希望用户再次返回登录屏幕。
或者另一个例子是，当用户单击注销按钮时，我不希望用户在注销后能够导航回主应用程序。
我发现的大多数其他问题都已经过时，不再适用于react路由器v6。
也许我想把这个对象从反应路由器的历史中移除？
我认为除了让我设置isLoggedIn状态和检查之外，还必须有一种从react路由器提供的方法，对吗？
浏览 7提问于2022-05-15得票数 1
回答已采纳
1回答
我试着做一个简单的反应路由器。但这根本不管用。如果我不包括<Routes>标记，那么页面是空的。在包含<Routes>标记之后，它也无法工作。请看一下。
import React from 'react';
import './App.css';
import Nav from './Nav';
import About from './About';
import Shop from './Shop';
import{ BrowserRouter as Router, Switch, Ro
浏览 7提问于2022-05-13得票数 1
回答已采纳
2回答
我希望从一个视图链接到另一个视图，然后滚动到特定的元素。我不喜欢任何动画，只想看到这个元素。从一个视图到另一个视图的链接是通过react路由器完成的。
我想我可以在我想要滚动的元素上创建引用，并将它们传递给另一个视图，但是不知道这是否是正确的方法？
一个简单的例子。(不起作用，但希望你能理解我想要实现的目标)
const ViewOne = () => {
const navigate = useNavigate(); // From react-router v6
return (
<p onClick={() =>
{
navigat
浏览 2提问于2022-04-22得票数 1
我试图在“router路由器-dom v6”中组织这些路由。这就是我的流程：
root AppComponent
function AppComponent() {
return <AppRoute />;
}
AppRoute.js (基本路线)
const AppRoute = () => {
return (
<>
<GuestRoute path="/login" component={Login} />
</>
);
};
GuestRoute
const GuestRout
浏览 6提问于2021-11-09得票数 17
回答已采纳
在react路由器V6中，我们以这种方式编写路由-
<BrowerRouter>
<Routes>
<Route path="..." element={<div> ... </div>} />
<Route path="..." element={<div> ... </div>} />
</Routes>
</BrowerRouter>
现在，如果我想插入一个依赖于道具的元素，比如一个名称数组(定义为另一个组件)，那
浏览 3提问于2022-04-19得票数 -1
回答已采纳
1回答
React路由器不呈现
、、、
我试过使用路由器，但它不起作用。我已经知道React路由器Dom v6已经从切换到路由，但是当我运行程序时，它只是显示一个空白的屏幕。有人知道怎么解决这个问题吗？这是我的代码：
App.js‘’
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage&#
浏览 1提问于2022-10-23得票数 0
回答已采纳
我正在尝试将我的应用程序从react路由器v3升级到v6 --实际上我安装了react router v6.2.1和ReactiveRouterv6.2，我使用的是类型记录，所以我也安装了@types。@types/react路由器v5.1.18和@types/react router v5.3.3，带有类型记录v3.8。
我发现这两个错误，
无法在节点_模块/react路由器/index.d.ts中找到“LeftSegment”
在node_modules/react-router/index.d.ts中找不到“推断”
浏览 5提问于2022-02-09得票数 0
回答已采纳
2回答
以前，在react路由器-dom v5 (或以下)中，您可以使用：
<Route path="/" render={() => {doSomething(); return <ComponentName />}} />
要同时触发函数和创建路由，无需在ComponentName组件中创建任何额外的代码。随着render被v6中的element所取代，您现在是如何完成这一任务的？
浏览 5提问于2021-12-13得票数 4
回答已采纳
在此之前，您需要包装类似这个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
回答已采纳
我想隐藏一个组件，根据路由的反应-路由器-多姆v6。我可以用精确的路径来实现它，但我也想将它隐藏在嵌套的路径中。我试过这样做：
{location !== "/dashboard/*" && <Header />}
但是它只在页面http://localhost:3000/dashboard/*上工作，这不是我想要的。我怎么才能解决这个问题？
这是完整的代码：
const location = useLocation().pathname
const conditionLocation = location === "/dashboard&#
浏览 3提问于2022-01-09得票数 -1
回答已采纳
对于react路由器v5，为了指定useParams的结果类型，我使用了：
const { param1, param2 } = useParams<{ param1: string, param2: string }>();
我如何使用react路由器v6来做到这一点？
我无法知道如何键入多个参数(例如：useParams<"param1">())，也无法知道如何将param键入为string而不是string | undefined (参见)。
浏览 1提问于2021-11-16得票数 4
我正在使用react-router v5，我想升级到v6。有一个问题:我有许多组件，并在其中使用useHistory，但我不想一个一个地将它们更改为useNavigate，而不是编写一个助手函数，用于在react路由器v6中导航(历史)，然后使用该辅助器(包装)函数。
问题是:如何在react路由器useNavigate中为v6编写辅助函数？
谢谢你的帮助!
浏览 12提问于2022-10-17得票数 0
在React路由器Dom v5上，我有一个可以使用嵌套元素的工作代码。V5代码是：
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" />
{user && (
<>
<Route path="/movies">
<Home type="movie"
浏览 5提问于2022-05-26得票数 2
回答已采纳
我使用的是react路由器v6，我希望呈现一个存储在变量中的组件。在早期版本的react路由器中，它们有组件支持，允许您使用不使用JSX语法的变量来呈现组件，但是V6不允许这样做。
import ComponentName from "components/ComponentName"
...
const component = ComponentName;
...
<Router path="..." element={component } />
浏览 5提问于2022-05-27得票数 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
回答已采纳
2回答
我知道有一个用React路由器进行测试的例子，但是我无法让它工作(我想是因为我使用的是react路由器V6)。
基本上，我需要路由器测试，因为我有使用useParams()获取部分url的details组件。没有它，我无法渲染组件。
这是我的尝试，使它工作(是的，这页也需要阿波罗，虽然它真的不需要redux)。
const AllTheProviders = ({children, initialRoutes}) => {
return (
<ApolloProvider client={client}>
<Provide
浏览 16提问于2021-12-31得票数 15
回答已采纳
我已经安装了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
回答已采纳
我对反应性路由器-dom v6的用法的改变感到非常困惑.通过他们的文档，我们可以简单地在元素支柱中传递我们的路由组件，但是我得到了这个错误
Uncaught TypeError: meta.relativePath.startsWith is not a function
我找不到任何解决办法。
import React from 'react';
import { Routes, Route, Navigate } from "react-router-dom";
import { Results } from './Results';
ex
浏览 9提问于2022-01-29得票数 2
回答已采纳
1回答
如何在react路由器v6中实现带回退的路由。我发现了一个错误：
未明错误: RouteWithFallbackBoundary不是<Route>组件。<Routes>的所有组件子组件必须是<Route>或<React.Fragment>
const RouteWithFallbackBoundary = (props: PathRouteProps) => (
<Route {...props}>
<MyErrorBoundary key={props.path}>
浏览 1提问于2022-02-16得票数 1
回答已采纳
在我的react应用程序中，使用react路由器v6，我动态地检索链接，这些链接可以是一个常规的外部url (如)，也可以是对应于带有react-router的路由的内部路径(如"/my-page")。
到目前为止，当我使用react-router-dom的<Link>组件时，我只能让它与内部路径一起工作，而不能使用外部url。就我所理解的文档而言，我无法找到一种方法来实现这一点，至少使用v6是不行的。
因此，到目前为止，我想出的最好的方法是编写自己的MyLink组件，根据href是外部还是不对外呈现<a>或<Link>：
function
浏览 2提问于2022-05-02得票数 1
回答已采纳
我是一个打字新手，我正在更新我们的应用程序的反应路由器版本，从v5到v6。我一直在讨论如何更新这个条件路由包装器：
// v5
import React from "react";
import {
Redirect,
RedirectProps,
Route,
RouteComponentProps,
RouteProps,
} from "react-router-dom";
export type ConditionalRouteProps = React.FC<
RouteProps &
Partial&l
浏览 17提问于2022-06-16得票数 2
回答已采纳
我正在使用React路由器V6和im，试图找出是否可以从使用Outlet组件呈现的嵌套路由中传递道具。不过，我似乎搞不明白。有人能帮忙吗？
例如，试图将标题支柱从BleTable (“蓝牙”)传递给App
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<App title="**Title from outlet**" />} >
浏览 12提问于2022-01-26得票数 3
回答已采纳
在react路由器5中，我可以使用从react路由器6中删除的一个，但我认为它已经被替换了，但是这会给这个使用程序带来一个安全错误。不管出于什么原因。
浏览 4提问于2021-11-17得票数 2
回答已采纳
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
我想导航到另一个页面，并通过react路由器V6重新呈现页面。我在努力：
navigate("/anotherPage",0);
但这不是工作。
window.location.reload(false);
不适合我的情况。
我该怎么做呢？
浏览 2提问于2022-04-15得票数 -1
警告:您不应该在同一路由中使用Route component和Route children；Route component将被忽略。
import { BrowserRouter, Route, Switch } from "react-router-dom"
import { useState } from "react";
import SideBar from "./SideBar";
import Playing from "./Playing";
import "./App.css";
import A
浏览 13提问于2022-01-14得票数 1
我的"404未找到页“与React路由器是不工作的。我就是这样使用路由器(V6)的：
<BrowserRouter>
<Routes>
<Route path='*' element={<Notfound/>} />
<Route path="/" element={<Homepage/>} />
<Route path="/home" element={<Homepage/>} />
浏览 1提问于2022-04-17得票数 2
我们使用我们自己的内部路由组件来跟踪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路由器v5中，我们可以以这样的方式提供一个404响应代码：
<Route path="*" component={NoMatch} status={404}/>
但是我们如何使用React路由器v6来实现它呢？
浏览 9提问于2021-12-08得票数 3
回答已采纳
1回答
响应路由器v6和代码功能问题
、、、、
我读了一篇文章，题为“改变BreadCrumb组件，这是用react v5 to react路由器v6完成的”。
作为新的反应和jsx，我发现这篇文章很有帮助，但我有几个问题。
这个特殊的代码片段，
{pathnames.length？( <Link onClick={() =>导航(“/”)} > Home )：(Home)}
{}是否指示html中的jsx？什么)：(为了什么？
谢谢!
浏览 14提问于2022-12-01得票数 1
1回答
我试图在电子js应用程序中使用react路由器v6。
但对我不起作用。
这个应用程序正确工作，而不实现反应-路由器！
当我使用react路由器v6时，我将在控制台中得到这条消息，而不会显示内容。
无路由匹配位置
项目结构
在此项目中，index.html文件在build文件夹中加载app.js。
index.js
App.jsx
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom
浏览 5提问于2022-04-27得票数 1
回答已采纳
2回答
在react路由器v6中，如何将路由参数传递给组件而不需要在组件中使用useParams()？
这就是我想要做的：
<Route
path='/'
element={ProfileComponent username={'thedefault'}
/>
<Route
exact
path='/u/:username/'
render={(props) =>
<ProfileComponent username={props.match.params.username}/>
}
浏览 9提问于2022-02-05得票数 4
回答已采纳
我正在使用redux & react路由器v6，我想从我的saga重定向到一条路由，有什么方法吗？
浏览 11提问于2022-01-27得票数 4
回答已采纳
3回答
当我更改页面时，应用程序将保持在与上一页相同的位置。当我更改页面时，我想从顶部显示组件。为了实现这一点，我正在尝试实现React路由器ScrollToTop。
我找到了文档并实现了它，但是我使用的是react路由器v6，所以它有点不同。
ScrollToTop组件中的所有内容都不会被呈现，我最终得到了一个空白页。
App.js：
import { Router, Routes, Route } from "react-router-dom";
import './App.scss';
import Main from './pages/Main'
浏览 8提问于2022-03-08得票数 3
回答已采纳
在这个v5之后，我从React路由器v6迁移到了v6。我想用测试它，但是我的旧单元测试(在中使用模式)停止了工作。
我的React路由器v6应用程序是这样的
const router = createBrowserRouter([
{
path: "/",
element: (
<>
<SiteHeader />
<Outlet />
</>
),
浏览 13提问于2022-11-11得票数 1
回答已采纳
我有一个组件，我在React路由器v6中使用它来管理私有路由，它会对auth令牌进行一些检查，并且会呈现Outlet组件或者重定向到登录页面。
我有-
import { Outlet } from 'react-router-dom';
export const CheckAuth = (props) => {
const valid = ...;
if (!valid) {
window.location.replace(loginUrl);
return null;
}
return <Outlet />;
};
用它就
浏览 4提问于2022-01-10得票数 6
回答已采纳
这是我运行的App.js文件
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
} from 'react-router-dom';
import HomePage from './pages/HomePage';
import './App.css';
class App extends Component {
render() {
return (
<Router>
浏览 5提问于2022-03-09得票数 2
回答已采纳
在React路由器版本5中，我有一个NavLink，它看上去如下所示：
<NavLink
to="/notes"
exact={true}
className="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
activeClassName="bg-indigo-50 border-indi
浏览 3提问于2022-01-01得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
