react-router-dom 相关问题

使用此标记可以了解有关DOM使用和React Router v4绑定的问题。

在React中混合useNavigate和useHistory

在我现在的工作场所，我要做的项目到目前为止一直在使用useHistory。我知道在较新的版本中通常最好使用 useNavigate。可以吗（不中断...

reactjs react-router-dom

回答 1 投票 0

错误：嵌套在路径“/app”下的绝对路由路径“/”无效

我突然收到这个错误，不知道为什么。我没有更改“react-router-dom”：“^6.0.0-beta.4”版本。但是“react-dom”：“^16.8.4””已经改变了......

javascript reactjs react-router-dom

回答 6 投票 0

使用 React-Router DOM 分页无法正常工作

我正在尝试使用react-router-dom为名为“Shop”、Contact和Cart的组件实现分页。为了存储 URL 路径，我使用了一个数组。状态变量用作数组...

reactjs react-hooks react-router react-router-dom

回答 1 投票 0

React 路由器 dom 导航在 useRoutes 中不起作用

导出默认函数 Router() { const [存储，调度] = useStore(); const handleAppRedirect = () => { if (store.token === null) { 返回 export default function Router() { const [store, dispatch] = useStore(); const handleAppRedirect = () => { if (store.token === null) { return <Navigate to="/login" />; } else if (isTokenExpired()) { (async () => { await dispatch({ type: "LOGOUT" }); })(); return <Navigate to="/login" />; } else { return <MainLayout />; } }; return useRoutes([ { path: "/", element: handleAppRedirect(), children: [ // Redirect from "/" to "/cars/list" { path: "/", element: <Navigate to="/cars/list" replace /> }, { path: "/cars/list", element: <Home /> }, ] }, { path: "/login", element: store.token === null ? <Auth type="login" /> : <Navigate to="/" replace />, }, { path: "*", element: <NotFound /> }, { path: "/oops", element: <WentWrong /> }, ]); } 当路径为“/”时，只显示我的MainLayout。如果我手动提供“/cars/list”，页面将使用 MainLayout 正确呈现。 MainLayout组件组织应用程序的主要内容（Outlet） <MainStyle> <PageLayout config = {pagesConfig}> <Outlet /> </PageLayout> </MainStyle> 当导航到“/”时，我希望它导航到“/cars/list”，但它只显示主要布局，内部没有任何出口。天哪，他们有没有改变过 React Router。我有 5 个关于 v.4 的项目。不期待那些迁移。无论如何，在我看来，你正在将 <Navigate to="/cars/list" replace /> 映射到“//”（这甚至是一个有效的 URL 路径吗？）。您依赖于 handleAppRedirect，因此将重定向组件作为 element 字段传递并不是真正的选择。您可以尝试使用空路径。我不知道它是否会起作用，React Router 可能会因为你传递了一条空路径而对你大喊大叫。或者，您最终可能需要在 <Home /> 组件中处理重定向。

javascript reactjs routes react-router-dom outlet

回答 1 投票 0

如何避免 React Router Link 在转到动态路由之前先转到根路由“/”？

我想做的是使用 Reddit API 在我的项目中进行搜索流程。用户进行搜索 Web 应用程序返回包含搜索查询的 Subreddits 每个 Subreddit 组件都有一个链接

reactjs react-router-dom

回答 1 投票 0

为什么当我想要转到有 Hashlink 的导航时会出现错误？ [重复]

[错误][2] 应用程序.jsx 从“react”导入 React, { useRef, useEffect, Suspense, Fragment }; 从“react-redux”导入{useSelector}；导入 { BrowserRouter, Routes, Route } from...

reactjs react-router-dom react-dom react-router-hash-link

回答 2 投票 0

如何在不改变这段代码逻辑的情况下在Router之外应用Hashlink？

错误 - 应用程序.jsx 从“react”导入 React, { useEffect, Suspense, Fragment }; 从“react-redux”导入{useSelector}；导入 { createBrowserRouter, RouterProvider } from...

reactjs react-router-dom react-dom react-router-hash-link

回答 2 投票 0

为什么我在Hashlink之后会出现很多这样的错误

错误 - 应用程序.jsx 从“react”导入 React, { useEffect, Suspense, Fragment }; 从“react-redux”导入{useSelector}；导入 { createBrowserRouter, RouterProvider } from...

reactjs react-router-dom react-dom react-router-hash-link

回答 1 投票 0

如何在react-router-dom中正确定义后备路由

我有以下路由器定义：我有以下Router定义： <Router> <Route exact path='/' component={Home}/> <Route path='/about' component={About}/> <Route path='/code' component={Code}/> </Router> 我希望任何未映射的路线（即/foo）重定向回根/。我尝试了<Redirect .../>但没有成功。另外，添加不带 <Route /> 的 path= 会导致每个页面上出现重复的组件。只需像这样在底部放置一个重定向，然后用 Switch: 包裹你的路线 <Router> <Switch> <Route exact path='/' component={Home}/> <Route path='/about' component={About}/> <Route path='/code' component={Code}/> // Redirect all 404's to home <Redirect to='/' /> </Switch> </Router> <Router> <Switch> // ...your routes and then <Route path="*" render={() => <Redirect to="/" />} </Switch> </Router> 您需要在 <Switch> 组件内执行此操作。 // IMPORT import { BrowserRouter as Router, Route, Link, Switch, Redirect } from "react-router-dom"; ---------- // USAGE <Switch> <Route path="/" exact component={Home} /> <Redirect from="/old-match" to="/will-match" /> <Route path="/will-match" component={WillMatch} /> <Route component={NoMatch} /> </Switch> 正如您从React Router Docs中看到的。开关渲染与位置匹配的第一个子项 <Route> 或 <Redirect>。这与仅使用一堆 s 有什么不同？ <Switch> 的独特之处在于它专门渲染一条路线。相反，每个与位置匹配的 <Route> 都会进行包容性渲染。考虑这段代码： <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> 如果 URL 是 /about，则 <About>、<User> 和 <NoMatch> 都将呈现，因为它们都与路径匹配。这是设计使然，允许我们以多种方式将 <Route> 组合到我们的应用程序中，例如侧边栏和面包屑、引导选项卡等。但是，有时我们只想选择一个 <Route> 进行渲染。如果我们位于 /about，我们不想也匹配 /:user （或显示我们的“404”页面）。以下是使用 Switch 进行操作的方法： import { Switch, Route } from 'react-router' <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch> 我很惊讶地发现这个问题的答案都不是我认为正确的，因为它们都使用重定向，在我看来这是一种糟糕的用户体验。如果您立即将用户重定向到 404 路由器，用户将不知道哪个 URL 是错误的。正确的答案应该是 React Router 自己的文档这里中演示的内容。 <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/old-match"> <Redirect to="/will-match" /> </Route> <Route path="/will-match"> <WillMatch /> </Route> <Route path="*"> <NoMatch /> </Route> </Switch> 请在所有Routes底部添加默认路由（添加from属性进行重定向） <Router> <Route exact path='/' component={Home}/> <Route path='/about' component={About}/> <Route path='/code' component={Code}/> <Redirect from="/" /> </Router> 工作链接https://stackblitz.com/edit/react-st9nug?file=index.js 在 React Router v6 中，Redirect 组件已被 Navigate 组件替换。因此，您应该使用这样的 Navigate 组件，而不是使用 Redirect to="/"： <Routes> {/* Define your other routes here */} <Route path="/home" element={<Home />} /> {/* Redirect to /home */} <Route path="*" element={<Navigate to="/home" replace />} /> </Routes>

reactjs react-router-dom

回答 6 投票 0

根据用户输入动态创建网页

我正在 React 中开发一个用于安排小组会议的项目。这个想法是用户可以在主页中创建一个俱乐部，然后导航到该俱乐部页面。一个用户可以是多个俱乐部的成员...

reactjs google-cloud-firestore firebase-authentication react-router-dom

回答 1 投票 0

导航到另一个页面后显示react-toastify toast

我有这个函数，可以在提交时将数据提交到 API 调用函数，然后使用成功数据显示一个 toast。作为下一步，我导航到另一个页面并显示 toast...

reactjs navigation react-router-dom onsubmit react-toastify

回答 2 投票 0

页面刷新

我正在使用 React 开发一个产品网站，每次单击特定菜单时，它都会刷新我的整个页面，而不仅仅是渲染组件。导出 const 标头 = () => { return ...