使用此标记可以了解有关DOM使用和React Router v4绑定的问题。
我有一个带有多个路由的 React + Vite 应用程序。我的公共文件夹中还有一些静态 HTML 页面和资源（包括 home.html）。 我想让索引路由指向 home.html。那个...
我需要帮助，当用户没有专门进行身份验证时，当令牌过期时，我尝试重定向用户。 但是当用户重定向到登录页面时，如果用户想再次登录。他们必须点击手柄...
我正在使用react-router-dom 5.2.0 应用程序.jsx ` 我正在使用react-router-dom 5.2.0 应用程序.jsx `<Route path="/shop"> <ProductListPage /> </Route> <Route path="/shop/:page"> <ProductListPage /> </Route> <Route path="/shop/:gender/:category?"> <ProductListPage /> </Route> <Route path="/shop/:filter"> <ProductListPage /> </Route>` 产品列表页面.jsx `import { useParams } from "react-router-dom"; export default function ProductListPage() { let { page } = useParams(); let { gender, category } = useParams(); let { filter } = useParams(); console.log(page + " " + gender + " " + filter + " " + category); return ( <div className="bg-light-gray-1"> <ProductCategories /> <ProductList /> <ClientList /> </div> ); }` 无法获取页面或性别或任何其他内容，只是未定义。 我有一页列出所有产品。 第二个是用于分页的 第三个是分类 第四个是过滤 但是我从链接获取的变量不起作用。例如; "/shop/women/tshirt" "/shop/man/shoe" "/shop/1 我尝试获取这样的值，但不断获取未定义的值。 `import { useParams } from "react-router-dom"; export default function ProductListPage() { let { page } = useParams(); let { gender, category } = useParams(); let { filter } = useParams(); console.log(page + " " + gender + " " + filter + " " + category); 在 React-Router-DOM v5 中，路由顺序和路径特殊性很重要。路由按照指定的顺序从上到下匹配，并且 path="/shop" 也匹配所有 path="/shop/*" 路由，因此它是渲染的路由并渲染 ProductsListPage 组件，并且不设置路径参数。这就是为什么 page、gender 和 category 都未定义。 重新排序路线，以便可以先匹配更具体的路线，然后再回退到不太具体的路线。 另请注意，path="/shop/:page" 和 path="/shop/:filter" 具有相同的特异性，因此只能匹配一个或另一个，以先列出的为准。这实际上是一条重复的路线，应该删除一条。 示例： <Switch> ... <Route path="/shop/:gender/:category?"> <ProductListPage /> </Route> <Route path="/shop/:page"> <ProductListPage /> </Route> <Route path="/shop"> <ProductListPage /> </Route> ... </Switch> 或 <Switch> ... <Route path="/shop/:gender/:category?" component={ProductListPage} /> <Route path="/shop/:page" component={ProductListPage} /> <Route path="/shop" component={ProductListPage} /> ... </Switch> React-Router-DOM 5 Route 组件也可以采用路径数组，因此您可以声明单个路由并在数组中传递路径，而不是复制所有渲染相同 ProductListPage 组件的路由。路径顺序在这里仍然很重要。 <Switch> ... <Route path={[ "/shop/:gender/:category?", "/shop/:page", "/shop" ]} > <ProductListPage /> </Route> ... </Switch> 或 <Switch> ... <Route path={[ "/shop/:gender/:category?", "/shop/:page", "/shop" ]} component={ProductListPage} /> ... </Switch> 在 ProductListPage 中，您只需要一个 useParams 钩子调用，所有参数都可以从返回的 params 对象中解构。 import { useParams } from "react-router-dom"; export default function ProductListPage() { const { page, gender, category } = useParams(); console.log({ page, gender, category }); ... }
如何使用 ra-auth-msal 中的 msalAuthProvider 将自定义路由设置为 React-admin 中的默认路由？它似乎默认为我定义的第一个资源路由，但我希望它重定向......
BrowserRouter 内的链接标记仅更改 URL，但不渲染组件
我正在构建一个Netflix克隆应用程序，我正在使用react-router-dom v5在不同页面之间切换。但是，当我单击 Navbar.jsx 中的 Link 标签时，URL 会发生变化，但相应的...
“useHistory”（history.listen）方法在React router dom v6中不可用
我使用的是React router dom v6，“useHistory”方法在React router v6版本中不可用。 请建议我如何使用 React Router com v6 版本实现以下代码
我创建了一个ProtectedRoute组件： 从 '~/utils/cookie' 导入 { getItem }； 从 'react' 导入 { ElementType } ； 从'react-router-dom'导入{导航}； 导出 const ProtectedRoute = ({
我创建了一个ProtectedRoute组件： 从 '~/utils/cookie' 导入 { getItem }； 从 'react' 导入 { ElementType } ； 从'react-router-dom'导入{导航}； 导出 const ProtectedRoute = ({
我基本上是一个新手，无法做出反应。我目前正在使用 ReactJS 构建一个应用程序。 所以，这是我的问题。我有这个模态和主页组件。每当我单击映射自...的卡片组件时
我正在开发一个 React 项目，在导航到新路线时我需要页面滚动到顶部。我已经实现了 ScrollToTop 组件，但它似乎不起作用。该页面保留...
当我单击链接时，我的网页在刷新网页之前不会呈现所需的组件。 这是我的代码： // 索引.js const root = ReactDOM.createRoot(document.getElementById('root'));
React Router v6 中旧的 CreateBrowserHistory() 函数的替代品
我想在我的应用程序的历史记录中推送一条新路线，如您所知，UseHistory() 挂钩和 CreateBrowserHistory() 函数（用于创建用户定义的历史记录）已从新版本的...
如何在 vs 中使用 React Router dom 以编程方式导航？
使用react-router，我可以使用Link 元素来创建由react router 本机处理的链接。我看到它在内部调用了 this.context.transitionTo()。我想做一个导航。 …… 导入 {
Stackoverflow 社区您好。所以我在将数据从一个组件传递到另一个组件时遇到问题。所以我有 Free To Play 组件，它从 json 中获取 freetoplay 数据并将其渲染在 di...
我正在尝试在codepen中创建网络应用程序。我正在使用 React、ReactDOM。一切都很好。但是当我将react-router-dom添加到我的项目中时，出现错误： react-router-dom.min.js:1 未捕获错误：无法...
我想问个问题。 我有香草反应应用程序，使用来自react-router-dom的createBrowserRouter。我想使用操作将数据发送到服务器。我有一个表单组件，其中有...
我最近一直在学习react中的路由，这就是当我尝试使用对象样式路由而不是jsx样式路由时我面临的问题 错误：语法错误：意外的标记 '...
我正在开发一个 React 应用程序，最近向我的 App.jsx 文件添加了新路由。但是，添加这些路由后，我的应用程序仅显示白屏。当我删除新代码时，la...
数据未使用react-hook-form的useParams进行更新
不完全确定如何命名此标题，但这是我的问题： 我正在制作某种角色表，您可以通过在导航栏中单击角色来在角色之间进行交换。当选择不同的...
我正在实现react-router-dom来处理路由。路由在大部分情况下都有效，但是当用户访问 AccountHome 时我的 Header 组件不可见 我的路由器非常简单： 常量