react-router-dom 相关问题

使用react-router-dom v6进行路由在SPA中预先检测路由变化

我正在构建 SPA 应用程序。我有一个带有表单更改的组件，可以保存或取消这些更改，具体取决于用户按下的按钮。我有一个标志，表明某些更改...

单击按钮时，查询参数将从反应路由中删除

我在react js中遇到问题，有页面的路由，例如https://localhost:3000/profile?abc=123，URL已成功浏览，但问题是当我单击按钮时（我在

useLocation 未检测到 MemoryRouter 的位置更改？

我有这个 React 组件，它依赖于 props 和要渲染的查询参数： const 模块 = ({ color = '绿色' }) => { 常量位置 = useLocation() 让名称 = '梨' 常量匹配...

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。在反应项目中

我正在构建一个 React 应用程序来学习 mui 机会并在浏览器中收到此错误： 元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件......

./src/TopScroll.js 31:21-31 中的错误在“react-router-dom”中找不到导出“withRouter”（导入为“withRouter”）

App.js 从“./pages/Projects”导入项目 从“./pages/Experience”导入经验 从“./pages/About”导入关于 从 './TopScroll.js' 导入 TopScroll 我...

react-admin 如果在其他组件而不是 app.js 中则无法工作

我正在尝试将 React-Admin AdminDashboard 组件集成到使用 React-Router 进行导航的更大的 React 应用程序中。但是，我遇到了 AdminDashboard 不支持的问题...

当我启动项目时，例如运行 npm start 时，出现此错误

[从我的项目中捕获](https://i.stack.imgur.com/QCypc.png) 我尝试了很多解决方案但没有任何反应 错误信息 ; 编译失败。 [埃斯林特] src\App.js 第 13:10 行：“路线”不是

如何为 React 应用程序创建仅登录的路由？

我是一名初学者开发人员，试图创建一个 MERN stack Facebook 克隆，如果用户未登录，他们将被带到带有注册/登录表单的登陆页面。如果用户已登录，...

如何使用React Router将数据从一个页面传递到另一个页面

请我需要有关react-router-dom的帮助，我是这个库的新手，似乎可以找到任何解决方案。我从 api 调用中获得三个结果，其中我映射数据以将其呈现在 UI 上...

如何使用react useMutation和useNavigate在成功发布请求后导航到不同的页面

似乎它导航到我想要的页面，并立即重定向回我发出发布请求的页面。 我尝试使用 useMutation 中的 onSuccess 选项。我也尝试过使用突变。

状态未使用 React router dom v6 更新

我使用状态来控制页面的渲染 应用程序.tsx 从“react”导入{ useState，useEffect }； 从“@mui/material/styles”导入{ThemeProvider, StyledEngineProvider}； 我...

ReactJS：[Home] 不是 <Route> 组件。 <Routes> 的所有子组件都必须是 <Route> 或 <React.Fragment>

单击“开始测验”按钮时，我尝试导航到“/测验”。 但是，当我编译代码时，我在网站应用程序上收到以下错误：[Home] 不是 单击“开始测验”按钮时，我尝试导航到“/quiz”。 但是，当我编译代码时，我在网站应用程序上收到以下错误：[Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> 我是新来的，如果有人能帮助我，我将不胜感激！ 这是我的 App.js 代码： import { BrowserRouter, Routes, Route } from "react-router-dom"; import Footer from "./components/Footer/Footer"; import Header from "./components/Header/Header"; import Home from "./Pages/Home/Home"; import Quiz from "./Pages/Quiz/Quiz"; import "./App.css"; function App() { return ( <BrowserRouter> <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}> <Header /> <Routes> <Route exact path="/" component={Home} /> <Route path="/quiz" component={Quiz} /> <Home /> </Routes> </div> <Footer /> </BrowserRouter> ); } export default App; 这是我的 Home.js 代码： import { Button } from "@material-ui/core"; import { Container } from "@material-ui/core"; import { useNavigate } from "react-router-dom"; import "./Home.css"; const Home = () => { const navigate = useNavigate(); const sendSubmit = () => { navigate("/quiz"); }; return ( <Container className="content"> <h1 id="quiz-title">Phishing Quiz</h1> <h2 class="question-text"> Do you think you can beat our phishing quiz? </h2> <p className="description"> {" "} There are many social engineering attacks on internet however not all of them are good enough to trick users. However there are some scams that are identical to original websites and usually most of the users get tricked by them. </p> <p className="description"> Do you think you are smart enough to handle these attacks? </p> <p className="description"> We are challenging you with our phishing quiz which will show you examples of really good social engineering attacks on internet. We hope you can pass! </p> <p>""</p> <Button variant="contained" color="primary" size="large" onClick={sendSubmit} > Start Quiz </Button> </Container> ); }; export default Home; 我目前 Quiz.js 中只有空代码。 首先检查你的react router Dom的版本。当你有react-router-dom V6时会出现这个错误。 V6 有很多突破性的改变，所以尝试阅读官方文档 看看这个：https://reacttraining.com/blog/react-router-v6-pre/ 现在回答你的问题部分 React router v6 引入路由 路线介绍 v6 中最令人兴奋的变化之一是 强大的新元素。这是一个相当重大的升级 来自 v5 的元素，具有一些重要的新功能，包括 相对路由和链接、自动路由排名和嵌套 路线和布局。 <BrowserRouter> <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}> <Header /> <Routes> <Route exact path="/" element={<Home/>} /> <Route path="/quiz" element={<Quiz/>} /> </Routes> </div> <Footer /> </BrowserRouter> 另请查看从 v5 到 v6 的迁移指南 https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migration-5-to-6.md#relative-routes-and-links 仅允许 Route 或 React.Fragment 为 Routes 组件的子组件，反之亦然。您已经在“/”路径上渲染了一个 Home 组件，因此请删除无关的 <Home /> 组件。看来您也在使用 react-router-dom v6，因此 Route 组件不再通过 render 或 component 道具渲染组件，它们现在将组件 渲染为 element 道具上的 JSX。 <Routes> <Route exact path="/" component={Home} /> <Route path="/quiz" component={Quiz} /> <Home /> // <-- remove this </Routes> 到 <Routes> <Route path="/" element={<Home />} /> <Route path="/quiz" element={<Quiz />} /> </Routes> 尝试这个语法对我有用 <Routes> <Route path="expenses" element={<Expenses />} /> <Route path="invoices" element={<Invoices />} /> </Routes> 请参阅文档了解更多信息 https://reactrouterdotcom.fly.dev/docs/en/v6/getting-started/tutorial 将这些添加到您的index.js文件中 1. import { BrowserRouter } from "react-router-dom"; 2. <BrowserRouter> <App /> </BrowserRouter> 将这些添加到您的 App.js 文件中 1. import { Routes, Route } from "react-router-dom"; 2. <Routes> <Route path="/" element={<AllMeetups />}> </Route> </Routes> 查看此链接了解更多 https://www.youtube.com/watch?v=OAjzvS_57z0 这是react-router-dom的旧版本代码。并且它不会在 v6 代码中运行。 <Route path="/home"> <Header /> <MyPage/> </Route> 因此，您必须按照以下格式升级您的代码。这意味着您只需将组件放入 element <Route path="/home" element={ <> <Header /> <MyPage /> </> } /> 我希望这个解决方案能够奏效。 谢谢。 两种选择： 选项 1。使用柯里化函数将每个延迟加载的 Route 元素包装在 Suspense 组件中。这避免了在每个 Route 的 element prop 中这样做。 import { Suspense } from "react"; export const Loadable = (Component: any) => (props: any) => { return ( <Suspense fallback={<p>Loading</p>}> <Component {...props} /> </Suspense> ); }; 选项 2：通过数据声明路由，而不是使用 Route 组件。使用自定义函数（本例中为createRoutesWithSuspenseWrappers）生成每条路由，并包裹在 Suspense 中。 const routes = createRoutesWithSuspenseWrappers([ { path: '/', element: <Root /> }, // ... ]); createBrowserRouter(routes);

如何在React-Router中设置活动类？

我有一个使用 React-Router 创建的导航 tsx 导航 从“反应”导入反应 从“./menu”导入{菜单} 从“react-router-dom”导入{链接} 从 './HamburgerMenu.module.scs...

将 Redux 与 React-Router-DOM 数据路由器结合使用

我可以通过以下方式将 Redux 与路由器一起使用吗？还有理由以这种方式使用它而不是使用路由器模块的钩子吗？ 从“...

为什么这个函数返回void？

这是我的 useSend 函数，我正在使用 Typescript + React。 const useSend = (方法: 字符串, url: 字符串, 数据: 任意): Promise => { 返回获取（网址，{ 方法：我...

在React中使用React-Router-DOM的useLocation接收传递的数据会导致手动输入的链接不起作用

一开始，如果手动输入的链接错误（例如：“/characters/test”），它会起作用，但如果正确，它仍然会重定向到错误404。如果从角色组合中单击该链接...

将（react-router-dom）链接到具有状态的同一位置

考虑这样的链接： 该链接驻留在主组件（元素）的子组件中，位于 /samelocation/:id。测试是否

React Link 抛出 TypeError：赋值的右侧无法解构

我正在尝试运行一个简单的路由器，以用于学习目的。目前，我编写的应用程序可以编译，但一旦页面加载，浏览器就会抛出错误。 类型错误：右侧...

React 布局状态更改在出口中重新渲染子路由

我正在制作一个反应应用程序，它使用布局来显示传递给它的路由。该布局有一个标题和一个可以打开和关闭的侧边栏。当侧边栏打开或关闭时，会导致重新...

OAuthCallbackRoute › 用于 OAuth 回调 › 成功的 OAuth 回调 › 成功获取令牌 › 使用收到的代码来获取身份验证令牌

OAuth： 从 'react' 导入 { useContext, useEffect }; 从 'react-router-dom' 导入 { useNavigate, useLocation }; 从 './AuthenticationContext' 导入 AuthenticationContext； 功能