使用此标记可以了解有关DOM使用和React Router v4绑定的问题。
手动输入 URL 时，React-Router-Dom 链接不起作用
我在lastordersgame.com 创建了一个在线饮酒游戏。当您通过页面上的导航进入游戏时，它会将 /drinking_game 添加到 url 中，并且一切加载正常。然而，什么...
为什么在React中导入UseSearchParams会抛出生产错误
我正在尝试访问我的反应应用程序中的查询参数。我的代码相当标准，如下所示。 从“反应”导入反应； 从'react-router-dom'导入{useSearchParams}； 常量应用程序 = () =...
我正在 YouTube 上关注本教程 [https://www.youtube.com/watch?v=7CqJlxBYj-M] 我仔细地遵循了每一步，安装了所需的软件包。 尽管有教程，我还没有安装...
如何通过 BrowserRouter 在单独的 .jsx 文件中使用 MUI Drawer？
我在Github上为我的问题准备了一个简单的测试用例： 在我的 App.jsx 中有以下代码： 我在 Github 上准备了 一个简单的测试用例来回答我的问题： 在我的App.jsx中有以下代码： <NavDrawer /> <BrowserRouter> <Routes> <Route path="page1" element={<Page1 />} /> <Route path="page2" element={<Page2 />} /> <Route path="page3" element={<Page3 />} /> <Route path="*" element={<Page4 />} /> </Routes> </BrowserRouter> 在 NavDrawer.jsx 中我有代码： const myLinks = [ { text: "Page 1", path: "/page1", icon: <CarCrash /> }, { text: "Page 2", path: "/page2", icon: <Help /> }, { text: "Page 3", path: "/page3", icon: <Directions /> }, { text: "Page 4", path: "/page4", icon: <CarRepair /> }, ]; function MyListItem({ text, path, icon }) { return ( <ListItem disablePadding> <ListItemButton> <ListItemIcon>{icon}</ListItemIcon> <Link to={path}> <ListItemText primary={text} /> </Link> </ListItemButton> </ListItem> ); } export default function NavDrawer() { return ( <Drawer> <BrowserRouter> <nav> <List> {myLinks.map((item, index) => ( <MyListItem key={index} icon={item.icon} text={item.text} /> ))} </List> </nav> </BrowserRouter> </Drawer> ); } 不幸的是，当我单击Link中的Drawer之一时，没有任何反应，显示的页面保持Page4，并且控制台中没有打印任何消息或错误。 我在 Reddit 上收到了 ulvesked 的友好答复 - 我必须在顶部 App.jsx 文件中使用不是两个，而是一个 BrowserRouter。 此外，我错过了将 path 参数传递给 Link 中的 Drawer。 现在应用程序按预期工作：
我们的产品 //文件名-allProducts 从“反应”导入反应 const 所有产品 = () => { 返回 （ 所有产品 ） } 导出默认AllProducts； 我没有被重定向到此页面作为输出...
如何使用 <Link> 执行类似于 JS React 中的“ window.location = "/GameOverDied"; ”的操作？
目前我正在尝试使用我在 React 中构建的游戏进行一些动画过渡，并且我不想要 href 或 window.location 的重新渲染/刷新功能。我将如何使用 中的
react-router-dom 中的 loader prop 参数 prop 类型定义的打字稿错误
我试图在路线的 loader 属性中使用 params 属性，因为我使用的是 typescript，我定义了如下所示的参数，但 typescript 对我大喊大叫，我不知道为什么？ 请以任何方式...
如何解决自定义路由组件中的 eslint 错误：“禁止传播 prop”？
如何解决自定义路由组件中的 eslint 错误：“禁止传播属性”？ 此错误发生在下面的第 3 行和第 6 行： const PrivateRoute = ({组件: 组件, ...re...
在验证和提交表单后使用 useNavigate() 反应重定向，使用带有加载器和操作的路由
所以我建立了一个演示网站，并以提交新用户的形式。 文件： 应用程序.jsx： 从“反应”导入反应； 导入'./App.css'; 进口 { 路由器提供商， 创建浏览器路由器 } 来自 'react-ro...
如何将子路由设置为react-router-dom中的默认路由
我有一条路线“/signup”，下面有两个子路线“战斗机”和“同伴”。当用户进行“注册”时，我希望其中一个成为默认值，例如“战斗机”或“同伴”...
我正在从 React Router v5 迁移到 React Router v6。新版本的主要变化之一是路径属性不接受数组。 因此，原始代码类似于...
如何使用 React Router 和 useParams hook 检索哈希（#）后的参数？
我有一条类似的路线 在我的 React Router 中。 SearchPage是一个使用react-ro提供的useParams()钩子的组件...
React Router v6.4 引入了带有 createBrowserRouter 和 RouterProvider 的新路由 API。 在旧版本的 React Router 中，可以环绕使用 React Rout 定义的路由...
React Router - 如何重用根路由中 errorElement 的布局？
我正在使用 React Router v6，以下是我的路线： const 路由器 = createBrowserRouter([ { 小路： '/'， 元素: , 错误元素：， 孩子们： [ ...
成功登录后，我想重定向到 /dashboard。我无法使用 useNavigate()，因为它位于 App.js 文件中，并且不在组件内部。下面是我的代码。我尝试使用重定向和导航但是...
这是我的index.tsx 从'react-dom/client'导入ReactDOM； 从“./App”导入应用程序； 从“@azure/msal-browser”导入{PublicClientApplication}； 从“@azure/msal-reac...”导入{MsalProvider}
App.jsx 从'react'导入{useState}； 导入'./App.css'; 从 'react-icons/fa' 导入 { FaFacebook }； 从'react-router-dom'导入{链接，路由，路由}； 函数应用程序（）{ const [用户名，
如何在 React Router DOM v6 上使用 ScrollRestoration
我已经创建了我的路由器，如 RRDv6 文档中推荐的那样： 导出常量路由器 = createBrowserRouter([ { 小路： '/'， 元素: , 孩子们： [ ...
react-router-dom | path="*" 在 vercel 上不起作用
我目前正在使用 React 和 React Router Dom 开发一个应用程序，并且正在将其部署在 Vercel 上。到目前为止，我的所有路线都按预期运行，e...
我正在编写一个在线商店，它有一个目录和一个用于查询输入的输入。通过单击 Enter（在除目录之外的任何页面上），我们可以进入目录本身，并且查询将进入搜索