React Router - 一个完整的React路由库，灵感来自Ember的路由系统
将 Redux 与 React-Router-DOM 数据路由器结合使用
我可以通过以下方式将 Redux 与路由器一起使用吗？还有理由以这种方式使用它而不是使用路由器模块的钩子吗？ 从“...
我可以通过以下方式将 redux 与路由器一起使用吗？还有理由以这种方式使用它而不是使用路由器模块钩子吗？ 从“重新...
我希望标题是可以理解的。 所以问题是，当我将组件包装在 中时，我收到此警告。 警告：[类别] 不是 组件。所有组件子项...
这是问题的简单版本，而不是实际问题。 反应代码： 这是问题的简单版本，而不是实际问题。 反应代码： <Router> <Navbar/> <Routes> <Route path="/:genreId" element={<MovieList/>} /> <Routes> <Router> 这个问题是在导航栏中，我有几个按钮可以进入特定的类型。 我想突出显示导航栏中的活动按钮（当我单击“喜剧”时，“喜剧”按钮应该亮起） 一些解决方案 如果我重新加载，状态 => 将无法工作 会话存储=>如果我第一次访问网站，将无法工作 使用 useParams Hook 提取参数 => 这将不起作用，因为参数“genreId”可用于 movieList 组件而不是导航栏 从 window.location 中提取 => 不想这样做，因为它看起来太临时了 什么是正确的方法？ 我建议＃3“使用 useParams Hook 提取参数 => 这将不起作用，因为参数“genreId”可用于 movieList 组件而不是导航栏”。不过，您是对的，这不起作用，因为 Navbar 组件呈现在 Routes 组件之外，并且无法访问当前匹配的路线。要解决此问题，您应该将 Navbar 组件移至 Routes 组件内部。为了完成这项工作，您将创建一个渲染 Navbar 组件的布局路由组件和一个用于嵌套路由的 Outlet 组件，以将其 element 属性渲染到其中。示例：import { Outlet } from 'react-router-dom'; const Layout = () => ( <> <Navbar /> <Outlet /> </> ); 然后将 MovieList 路由渲染为布局路由的嵌套路由。 <Routes> <Route element={<Layout />}> <Route path="/:genreId" element={<MovieList />} /> </Route> </Routes> Navbar组件现在可以安全地访问genreId路由路径参数，并使用它来应用将按钮标记为“活动”所需的任何逻辑。这是一个简单的示例：const genres = ["action", "comedy", "drama"]; const Navbar = () => { const navigate = useNavigate(); const { genreId } = useParams(); const navigateTo = (genreId) => navigate(generatePath("/:genreId", { genreId })); return ( <> {genres.map((genre) => ( <button key={genre} className={["genreButton", genreId === genre && "active"] .filter(Boolean) .join(" ")} type="button" onClick={() => navigateTo(genre)} > {genre} </button> ))} </> ); }; 我通常使用 IndexDB 来做这类事情。要完美管理 IndexDB，您可以使用 localforage。您可以查看此链接。localforage 您可以使用 NavLink 代替 Link 来设计活动路线。这是文档。 <Router> <Navbar/> <Routes> <Route path="/:genreId" element={<MovieList/>} /> <Routes> <Router> 在导航栏组件中，您可以像这样编写以获得活动链接： <nav> <NavLink to="/:genreId">Genre Name</NavLink> </nav> 尝试将 useLocation 钩入 react-router-dom。 这有点类似于解决方案，“4.从 window.location 中提取 => 不想这样做，因为它看起来太临时”，但不是那么“临时”。
当我点击链接时，我使用了 React-router 来重定向我的页面，但它没有重定向
这是我的app.js 从“反应”导入反应 从 './components/Quote' 导入引用； 导入'./index.css' 从 './components/Abraham' 导入亚伯拉罕 进口 { BrowserRouter 作为路由器， 路线， ...
我需要帮助了解如何使用 React-Router 设置从导航栏登录按钮到登录页面的导航。 应用程序.js 从“反应”导入反应； 从 './comp/Header' 导入标头； 导入
在React中使用React-Router-DOM的useLocation接收传递的数据会导致手动输入的链接不起作用
一开始，如果手动输入的链接错误（例如：“/characters/test”），它会起作用，但如果正确，它仍然会重定向到错误404。如果从角色组合中单击该链接...
我正在使用react，我遇到了一个问题，尽管是一个美观问题而不是功能问题。 我正在从名称 API 生成反应路由。该路线运行良好，但由于名称有 sp...
this.forceUpdate 并通过 React-Router-DOM Link 组件传递状态
我已经解决了自己的问题，但我不知道发生了什么以及它为什么有效。 我有一个链接组件，它链接到当前所在的同一页面，但针对不同的产品。所以...
React：this.forceUpdate并通过react-router-dom Link组件传递状态
我已经解决了自己的问题，但我不知道发生了什么以及它为什么有效。 我有一个链接组件，它链接到当前所在的同一页面，但针对不同的产品。所以...
我正在尝试创建一个基于组件状态创建的查询链接。当用户选择一个选项时，状态会发生变化，然后用户可以选择“搜索”按钮。
未捕获的运行时错误：无法读取 null 的属性（读取“useRef”）
我面临这样的错误，一切正常，编译成功，但应用程序未显示在浏览器上并显示： “未捕获的运行时错误：无法读取 null 的属性（
我有一个react应用程序，它使用react-router和一个路由器，如下所示： 我有一个 React 应用程序，它使用 React-router 和一个看起来像这样的路由器： <Router> <div> <Route exact path="/" component={Homepage} /> <Route path="/map/:uid" component={Userpage} /> <Footer /> </div> </Router> 该应用程序使用 Firebase 托管进行托管。 如果我打开我的网站并单击，路由器将我带到/map/uid，它加载得很好。但是，如果我关闭浏览器，然后尝试显式导航到 <domain>/map/<known uid>，我会从 Firebase 收到“未找到页面”页面。这是我第一次使用react-router。 更新#1 我已将我的 firebase.json 更新为： { "hosting": { "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 我不再收到“页面未找到”页面；但是，我的反应应用程序的内容永远不会加载，并且我在控制台中注意到一个错误： Uncaught SyntaxError: Unexpected token < 更新#2 我现在明白为什么会出现错误。查看 Chrome 开发工具中的 Sources 选项卡，只有当我直接导航到 static/css 时，我的 static/ 文件夹才有一个奇怪的名称（static而不是 /map/{known uid}）。当我导航到主页时，所有加载都正常。 这解释了错误。我还是不知道如何解决。 对我来说，我可以看到根 url，但其他路由（例如“/pricing”）给了我 404。我将其添加到我的 firebase.json 文件中，现在它可以工作了。还要确保 firebase/auth 允许在域上工作。 firebase 的 auth 部分有一个设置。 "rewrites": [ { "source": "**", "destination": "/index.html" }], 我的完整 firebase.json { "firestore": { "rules": "firestore.rules", "indexes": "firestore.indexes.json" }, "hosting": { "public": "build", "rewrites": [ { "source": "**", "destination": "/index.html" }], "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] }, "storage": { "rules": "storage.rules" } } 迟到的答案，但我面临着同样的问题。我用两个步骤解决了这个问题： 像这样更新 firebase.json { "hosting": { "site": "myproject", "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 像这样在index.html中设置基本url <!DOCTYPE html> <html lang="en"> <head> <base href="/"> . . . 迟到了，但请尝试从 package.json 中删除“homepage”键（或确保它相对于主页存储位置是正确的。 迟到的回答，但它解决了我的问题： 当执行firebase init时，它会询问是否是单页应用程序。默认答案是 No，但是，只需选择 Yes 即可。 由于客户端路由，您会收到此错误。 （React 内心深处） 在构建（文件夹）中构建反应应用程序时，您只能看到一个 index.html 文件。 当您使用 YOUR_DOMAIN/map 点击 URL 时，Firebase 正在尝试获取 build->map->index.html 但存在于您的构建文件夹中。 所以你可以做 你可以使用react-router-dom吗？构建应用程序构建文件夹后， index.html 你可以提及<base href="/"/>。 尝试将 cleanUrls 属性设置为 true。 请参阅 Firebase 文档了解更多信息 "hosting": { // ... // Drops `.html` from uploaded URLs "cleanUrls": true } 就我而言，问题有所不同。我能够正确地看到索引页，但当我导航到新路线时，我看到的是空白页。 Firebase 已正确配置： "rewrites": [ { "source": "**", "destination": "/index.html" } ] 部署后，我进入请求选项卡并看到了这一点。 然后我检查了 index.html 文件并注意到了这一点： 由于我的配置在同一个 dist 目录中构建所有内容， dist/index.html dist/main.bundle.js ... 这个问题很简单。我必须通过调整 webpack 配置来告诉 webpack 我的资源是否相对于 index.html 文件放置： { ... output: { ... publicPath: '/', ... } ... } 现在需要像这样的文件： 这将告诉浏览器查看根目录，即放置 index.html 的位置。 如果您有多个配置并且不扩展它们，请确保更改生产配置。 { "hosting": { "public": "dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "cleanUrls": true }, "rewrites": [ { "source": "/(.*)", "destination": "/index.html", "dynamicLinks": true } ] } 在你的 firebase.json 中尝试一下这个，路由肯定可以工作 在 basename 中指定 Router 怎么样？沿着这个： <Router basename='/map/5AJA3RefFuTZ8z4Gn6BjMgZRgPZ2'>
在react-router-dom v6和@types/react-router-dom v5.3.3中找不到“hello”路径
主要文件： 从 'react' 导入 React, { useContext, useEffect }; 从 'react-router-dom' 导入 { Route, RouteProps, Routes, useLocation, useMatch }; 从 './
使用react-router-dom v6在测试文件中出现错误：“类型‘IntrinsicAttributes & RouterProps’上不存在属性‘history’。”
主要文件： 从 'react' 导入 { useContext, useEffect }; 从 'react-router-dom' 导入 { useNavigate, useLocation }; 从 './AuthenticationContext' 导入 AuthenticationContext； 功能
使用React Router 6中的数据路由器我想从操作中重定向用户。但我还需要返回数据。你能同时做这两件事吗？ // 重定向有效，但无法发送数据 出口
React Router v5 - 单击 <Link /> 不会重新渲染
据我了解，单击 React Router 的 组件应该会导致 内的所有内容重新渲染。 然而，在这个简单的例子中似乎并非如此......
如何使用 Material UI 在 React 中打开新组件
我正在使用 Typescript 和 Material UI 在 React 中创建一个仪表板，其中包含月份以及除月份之外还显示的相应值。为此，我使用了我创建的 React 组件&...
我在网站上实现用户登录功能时遇到了 React 上下文问题。用户可以作为虚拟用户登录，我已经使用 React 上下文实现了这一点。然而，AF...
假设使用useParams()并访问正确的值（路径）。 useParams返回的值不是已定义的吗？ // URL: /user/:userId，当前URL为/user/100 const { userId } = useParams() // 使用...