react-router-dom 相关问题

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

我的用例是 Router_configuration.js 从“react-router-dom”导入{createBrowserRouter，RouterProvider}；从“./Product”导入产品，{ loader }；从 &q... 导入 Route1

javascript reactjs react-router react-router-dom

回答 1 投票 0

模拟的 useNavigate for Jest 似乎没有更新路径

我有一个多步骤表单，目前正在编写一个笑话测试来检查用户是否可以按预期从步骤 1 移动到步骤 2。在测试中我可以看到 currentStep 状态正在更新，如标题所示

reactjs jestjs react-router-dom

回答 1 投票 0

React Router：带小数的尾随路径参数不起作用

有人可以解释一下为什么以下路径不适用于React Router 6（BrowserRouter） /路径/1.1.1 但下面这个是这样的： /路径/1.1.1/ 我的路由配置如下。我就是我们...

reactjs react-router-dom webpack-5

回答 1 投票 0

公共目录中的 React sitemap.xml 文件在构建后未显示

我有一个脚本可以在公共目录中生成 sitemap.xml 文件。开发时可以在 localhost:3000/sitemap.xml 中访问它。但是当它进行构建时，我无法访问该文件......

javascript reactjs react-router-dom sitemap

回答 3 投票 0

如何在不同的路线上呈现不同的语言？

我已经用 i18next 翻译了我的 React 组件。当我切换语言时，如何使用react-router为localhost:3000/en这样路由它？当我切换时它应该自动切换到 /se...

javascript reactjs internationalization react-router-dom

回答 1 投票 0

微前端的动态 React 路由问题

我正在使用 React 和 vite 创建微前端。我无法完成我想要的路线。 '/' // 主机应用程序主页 '/some-tenant' // 远程应用 TenantPage '/某些租户/某些订阅...

reactjs react-router-dom vite

回答 1 投票 0

如何通过插座上下文传递道具并从子组件内的 useOutletContext() 检索道具

我尝试在插座react-dom-router组件内使用上下文，并通过插座子组件内的useOutletContext()检索道具，如下所示 tsx // 父组件内部我尝试在 Outlet React-dom-router 组件中使用上下文，并通过 Outlet 子组件中的 useOutletContext() 检索道具，如下所示 tsx //父组件内部 ` tsx //inside outlet children components: const { purchaseData, setPurchaseData, catsData, setCatsData, isLoading, setIsLoading, affection, setAffection, affectionColor, setAffectionColor, setHeaderBackgroundColor, } = useOutletContext(); ` 问题在于，如果父母和孩子的上下文模式不匹配。尽管检索到的道具具有相同的名称，但它们并不匹配。我尝试 console.log(useOutletContext() ，结果发现无法识别父 props 中的名称）。因此，在子组件中检索 props 时完全基于提供和检索的 props 的顺序。有没有办法解决这个问题或根据名称而不是顺序检索上下文？我尝试通过来自react-dom-router的outlet context和useOutletContext hook根据名称检索和传递props。我的期望是：数据根据名称进行匹配。发生了什么：数据不是根据名称匹配，而是根据顺序匹配。因此，如果传递的上下文和检索的上下文的顺序之间存在微小差异，应用程序就会崩溃。您应该按照提供上下文值的方式使用上下文值。如果使用数组： <Outlet context={[ purchaseData, setPurchaseData, catsData, setCatsData, isLoading, setIsLoading, affection, setAffection, affectionColor, setAffectionColor, setHeaderBackgroundColor ]} /> 那么消费者应该使用数组解构赋值来访问他们想要的值。顺序很重要，因为您正在访问数组元素 const [ purchaseData, setPurchaseData, catsData, setCatsData, isLoading, setIsLoading, affection, setAffection, affectionColor, setAffectionColor, setHeaderBackgroundColor ] = useOutletContext(); 或者如果您只想要一个子集，即仅 isLoading 和 setHeaderBackgroundColor: const [,,,, isLoading,,,,,, setHeaderBackgroundColor] = useOutletContext(); 使用对象会部分消耗这些值，因为它消除了顺序要求。只需使用对象解构赋值即可。 <Outlet context={{ purchaseData, setPurchaseData, catsData, setCatsData, isLoading, setIsLoading, affection, setAffection, affectionColor, setAffectionColor, setHeaderBackgroundColor }} /> const { setHeaderBackgroundColor, isLoading } = useOutletContext();

reactjs react-router react-router-dom react-context

回答 1 投票 0

React Router + vite + 动态路由

我在使用带有动态路由路径的 vite 的 React router dom 方面遇到了困难。我希望能够使用以下路线： 'http://localhost:8000' // 什么也没有。忽略 'http://localhost:8000/

reactjs react-router-dom vite

回答 1 投票 0

react-router-dom 匹配以特定后缀结尾的路径

我正在尝试将我的应用程序从react-router-dom v4升级到v6，我刚刚遇到一个问题，我有一个这样的路径。 } /&...

reactjs react-native react-router-dom

回答 1 投票 0

我可以减少 NavLink 组件样式 prop 代码的重复吗？

我正在使用 React-Router-DOM v6 练习路线，每当我在该路线上时，我都会使用 NavLink 组件的 style 属性将菜单标题中的文本设置为粗体。我成功了，但想要...

javascript reactjs react-router-dom

回答 1 投票 0

我可以缩短这个吗？反应路由器 dom v6

学习ReactJs，我正在练习路线，使用react-router-dom v6，我使用NavLink属性样式将菜单标题中的文本设置为粗体，每当我在该路线上时，我明白了

reactjs react-router-dom

回答 1 投票 0

在 React 中实现具有独立页面的嵌套路由的最佳实践是什么？

我在 React (TypeScript) 中有一个相当简单的路由设置。我有一个我总是想显示的页眉和页脚。显示我的首页内容的主页组件。令我困扰的部分...

reactjs react-router react-router-dom react-typescript

回答 1 投票 0

如何在useEffect中使用useParams()

我想根据 URL 参数在组件安装上加载不同的组件，但由于某种原因，我的 useParams() 对象空间在我的 useEffect() 中显示为未定义。 // 应用程序.js 函数应用程序（）{ ...

reactjs react-router-dom

回答 1 投票 0

react 路由器不适用于 S3 中的嵌套路径

我的react-router-dom设置如下： } /> 我的react-router-dom设置如下： <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/post/:slug" element={<Post />} /> // other routes </Routes> </Router> 我的前端托管在 S3 存储桶中，并通过 CloudFront 发行版提供服务。除了“/post/:slug”路线之外，我的所有路线都有效。这很奇怪，因为如果我使用 useNavigate 挂钩导航到帖子，它会起作用并使用正确的 slug 加载帖子。但是，如果我在帖子页面上重新加载或直接在浏览器中输入帖子网址（即 https://BASE_URL/post/slug/），它只会显示一个空白页面，并且似乎无法识别路线。我很茫然，因为如果我在本地运行前端，则后路由就可以工作。当我使用 S3 和 CloudFront 进行部署时，它不起作用。对于 CloudFront 主机，我将所有路径“*”转发到我的 S3 存储桶。我还添加了一个错误页面以转发到 /index.html 根对象。只需将错误文档指向index.html即可。此外，您还可以将 HTTP 响应代码设置为 200（如果适用）。

javascript reactjs amazon-s3 react-router-dom amazon-cloudfront

回答 1 投票 0

“历史对象是可变的”是什么意思？

我对 React Router 文档有疑问，它说“历史对象是可变的”并给出了如下示例：历史对象是可变的。因此建议访问...

reactjs react-router react-router-dom

回答 1 投票 0

使用Outlet将路由添加到受保护路由后无法访问

我正在尝试在react-router-dom v6中创建受保护的路由。但是一旦放置嵌套路由，我就无法访问它们。出现错误没有路线匹配位置“/places/new” 这些...

reactjs react-router-dom

回答 1 投票 0

如何使用react-router-dom导航到网页中的另一条路线？

我正在学习使用 React，但遇到了一个问题。如果您能帮助我，我将不胜感激。在组件中，我插入了一个链接，并且我希望它在单击时将用户带到