react-router 相关问题

如何导航到 React Router 中的部分

我尝试使用 React Router 导航到页面上的特定部分，但结果却落在页面顶部。手动输入网址确实会将我带到正确的位置。我在做什么...

REACTJS：根据React中的路由路径更改加载器API URL

要重用以相同格式加载不同数据的组件，相同的元素会呈现在不同的路径中。如何根据 EmpPage.js 中的路由路径更改 url 应用程序.js： { 路径：“emp-详细信息&

刷新<Routes>成功登录和注销后react-router v6中的组件[重复]

我在React应用程序中实现路由和导航时面临两个问题，并且我正在使用react-router-dom v6库来实现路由目的。 第一个问题：当我登录时，我应该被重定向...

模块联合应用程序和React Bootstrap

我是模块联盟的新手。所以我有一个非常基本的问题，关于构建一个 React 应用程序来支持模块联合。 所以我有index.js 导入('./bootstrap'); 出口 { }; 引导程序....

如何使用受保护的路由与passport.js反应

如何在使用passport.js登录后在react中使用受保护的路由 所以，我发现通过passport.js成功登录后，当我从前端向服务器发送请求时，

`fetcher.load`与 GET 提交相同吗？

我尝试理解为什么有 fetcher.load 以及何时使用它。 根据文档， fetcher.load 调用路由的加载器。但这也是 fetcher.submit({method: 'GET'}) 所做的。在

成功登录和注销后刷新react-router-dom v6中的`<Routes>`组件

我在React应用程序中实现路由和导航时面临两个问题，并且我正在使用react-router-dom v6库来实现路由目的。 第一个问题：当我登录时，我应该被重定向...

RouteComponentProps 与 useHistory

使用React功能组件和Typescript，使用useHistory钩子与RouteComponentProps（react router v5.1）之间有什么区别吗？ 使用 RouteComponentProps 的示例： 小鬼...

组件未显示在嵌套反应路由中

这是我的代码，我为我的组件创建路由，如下所示 } /> 这是我的代码，我为我的组件创建路由，如下所示 <Routes > <Route path="/" element={<Navigate to="/login" replace />} /> <Route path="/login" element={<Login />} /> <Route path="/dashboard" element={<Layout component={Dashboard} />} /> <Route path="/sale" element={<BookDetails />}> <Route exact path="/sale/:bookId" element={<Layout component={BookhDetails} />} /> <Route path="/sale/:bookId/salebooks" element={<Layout component={SaleBooks} />} /> <Route path="/sale/:bookId/viewbooks" element={<Layout component={ViewBooks} />} /> </Route> <Route path="*" element={<NotFound />} /> </Routes > 我的问题 我想在 BookDetails 组件上显示每本书的标题，但标题不应显示在 url 中，因此详细信息组件的 url 将如下所示： /sale/:bookId 2.当在 BookDetails 组件中我单击链接时，我想转到 salebooks 组件，但在单击链接后，URL 更改为 /sale/:bookId /salebooks 但它显示 BooksDetails 组件！ 谢谢你的帮助。 dashboar：仪表板中的此链接转到 bookDetails 组件。 <Link to={`/sale/${book.id}`} onClick={() => navigate(`/sale/${book.id}`)}> <button type="submit" className="btn custome-btn purple-active-ghost w-100"> {book.title} </button> </Link> BookDetails：此链接将转到 SaleBooks 组件。 <Link to={`/sale/${bookId}/salebooks`}> <button type="submit" className="btn custome-btn purple-active-ghost w-100"> go to salebooks </button> </Link> 我建议将 Layout 组件更新为路由布局组件，为它渲染的嵌套路由渲染 Outlet，然后在出口上下文上提供 books 数组以供嵌套路由使用。这允许更深层嵌套的路由通过 bookId 路由路径参数获取特定书籍的详细信息。 import { Outlet } from 'react-router-dom'; export const BooksLayout = () => { ...any business logic the layout had return ( <> ...any common UI the layout had {/* Render Outlet for nested routes and provide books array */} <Outlet context={{ books }} /> ...any common UI the layout had </> ); }; <Routes > <Route path="/" element={<Navigate to="/login" replace />} /> <Route path="/login" element={<Login />} /> <Route element={<BooksLayout />}> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/sale/:bookId"> <Route index element={<BookDetails />} /> // "/sale/:bookId" <Route path="salebooks" element={<SaleBooks />} /> // "/sale/:bookId/salebooks" <Route path="viewbooks" element={<ViewBooks />} /> // "/sale/:bookId/viewbooks" </Route> </Route> <Route path="*" element={<NotFound />} /> </Routes> 消费者使用 useOutletContext 钩子来访问插座上下文提供者提供的 books 数组。 仪表板 import { Link, useOutletContext } from 'react-router-dom'; ... const { books } = useOutletContext(); ... {books.map((book) => ( <div className="col" key={book.id}> <div className="card h-100"> <div className="card-img-top pb-5 mb-5"> </div> <div className="card-body"> <Link to={`/sale/${book.id}`}> <button type="submit" className="btn custome-btn purple-active-ghost w-100" > {book.title} </button> </Link> </div> </div> )} 书籍详情 import { Link, useOutletContext, useParams } from 'react-router-dom'; ... const { bookId } = useParams(); const { books } = useOutletContext(); const book = books.find(book => book.id === bookId); ... // if book exists, access all book object properties, e.g. id, title, and more <Link to={`/sale/${book.id}/salebooks`}> <button type="submit" className="btn custome-btn purple-active-ghost w-100" > go to {book.title} salebooks </button> </Link>

如何正确引用其他路由文件？

当我使用react和react-routerd-dom v6+创建路由时遇到问题。 我的项目树 我的反应应用程序/ |-- src/ | |-- 组件/ | |-- 页数/ | | |-- MainPage.jsx | | |-- 授权/ | |...

如何在 React Router 中处理同一表单上的两个不同操作

我有以下React Ruoter路由表： 常量路由器 = createBrowserRouter( [ { 小路： ”/”， 元素: , 错误元素：，

useUserContext 提供程序未将数据发送到个人资料页面

问题描述 我面临一个问题，存储在 useUserContext 中的数据似乎没有从我的 React 应用程序中的登录页面正确传递到配置文件页面。我有透...

在 React 中使用 fetch 与 Flask app.route 无法获取正确的信息

我目前正在尝试使用 React 前端和 Flask/Python 后端创建一个标准网站。我有一个单独的文件 server.py，我在其中从 NewsAPI 获取数据并解析它： 从烧瓶我...

在react中显示嵌套路由中的组件

这是我的代码，为什么它不显示销售组件？我想在销售组件中访问每本书的标题和 ID。但点击链接进行销售后没有任何反应。我该如何处理...

React Router - 如何确定是否按下了后退按钮？

我有这些场景 设置页面 -> 结果页面 -> 详细信息页面 用户选择设置，单击下一步，获取结果，然后单击查看更多详细信息。 详情页 -> 结果页 用户去...

如何在nextjs 14中使用map()？

我正在尝试使用 map() 方法迭代从 API 获得的响应，但我不断收到错误“drinks.map 不是函数”。下面是我的代码 /饮料 从“@/

如何将React项目用于html网站的整个子路由

我有一个现有的 HTML 页面和一个 React 项目。如何连接它们？ 首页.html 进入React页面 应用程序.js 我有一个现有的 HTML 页面和一个 React 项目。如何连接它们？ home.html <button>go to React page</button> 应用程序.js <BrowserRouter> <Routes> <Route path="/mypage" element={<Mypage />}> </Routes> </BrowserRouter> 我想点击“转到React页面”按钮，我可以导航到"/mypage"？ 该按钮应实现对 "/mypage" URL 的导航操作，该 URL 最好为您的 React 应用程序提供服务。 home.html 更新按钮以包含重定向到子路线的点击处理程序 <button onclick="navigateToReactApp()">go to React page</button> const navigateToReactApp = () => { window.location.href = "/mypage"; // check the path correctness }; 或者使用锚标记，这在语义上可能更正确。 <a href="/mypage">go to React page</a> App.js 通过设置 "/mypage" 属性，更新路由器以使所有路由/链接/等从托管/服务应用程序的 basename relative 工作。 <BrowserRouter basename="/mypage"> <Routes> <Route path="/" element={<Mypage />}> </Routes> </BrowserRouter>

如何停止渲染 app.js 中的组件

}> } /> <SideBar /> <Routes> <Route path='/' element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route path='/service' element={<Service />} /> </Route> </Routes> <Article /> </div> 我不想在服务组件中渲染文章组件。我怎么做？请帮助我。 Article组件无条件在路由内容下渲染。 <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> <Article /> // <-- always rendered! </div> 简单的解决方案就是从 JSX 中删除 Article： <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> {/* <Article /> removed */} </div> 但这可能不是您真正想要的。另一种选择是有条件地在路线上渲染它。 示例： <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> <Route path='article' element={<Article /> } /> // <-- only on "/article" path </div>

React Router 为动态路由渲染错误组件的问题

我遇到了 React Router 的问题，使用动态参数导航到特定 URL 会渲染错误的组件。具体来说，当导航到 http://localhost:3001/Create/4 时，...

React Router v6 使用参数导航

目前，我在实现React Router v6（使用6.3.0）时遇到问题 假设我有如下所示的路由 const ParticipantRoutes = () => ( 目前，我在实现React Router v6（使用6.3.0）时遇到问题 假设我有如下所示的路由 const ParticipantRoutes = () => ( <ErrorBoundaryRoutes> <Route index element={<Participant />} /> <Route path="new" element={<ParticipantUpdate />} /> <Route path=":id"> <Route index element={<ParticipantDetail />} /> <Route path=":id"> <Route path="edit-invoice" element={<InvoiceUpdate />}/> </Route> <Route path="invoice" element={<ParticipantInvoiceUpdate />} /> <Route path="edit" element={<ParticipantUpdate />} /> <Route path="delete" element={<ParticipantDeleteDialog />} /> </Route> </ErrorBoundaryRoutes> ); 还有另一条路线，比如 const InvoiceRoutes = () => ( <ErrorBoundaryRoutes> <Route index element={<Invoice />} /> <Route path=":id"> <Route index element={<InvoiceDetail />} /> <Route path="delete" element={<InvoiceDeleteDialog />} /> <Route path="payment" element={<InvoicePaidDialog />} /> </Route> </ErrorBoundaryRoutes> ); 当我访问 URL 上定义的 ParticipantInvoiceUpdate 时，问题就出现了，比如 .../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice 此页面具有向某些服务提交一些数据的行为，当接受服务器的响应时，我使用导航功能导航回 ParticipantDetail 元素。 navigate('/participant/${*some-guid-participant*}'); 但它不起作用，我尝试了一些东西，但似乎它只能导航到没有给出任何参数的元素。类似的东西 navigate('/participant'); 或 navigate('/invoice); 我也尝试过使用 generatePath 功能并将其与导航结合起来，但仍然没有成功 navigate(generatePath('/participant/:id',{id: participantId}), {replace:true}); 请帮助了解我是否遗漏了什么或误解了这个概念。 根据您的代码，路线：.../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice 指组件 InvoiceUpdate 而不是 ParticipantInvoiceUpdate 此外，使用字符串格式时不要忘记将 ' 更改为 ` : navigate(`/participant/${some-guid-participant}`);