react-router-dom 相关问题

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

[错误][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 ...