React Router - 一个完整的React路由库，灵感来自Ember的路由系统
如果订阅结束，我正在使用受保护的路由将用户重定向到订阅页面。但 Route 并不等待 api 响应到达。 const ProtectedRoute = ({ 组件: Comp...
如何在页面重新加载时清除react-router中的location.state？
我目前正在通过路线更改的状态，如下所示： 我目前正在通过路线更改来传递我的状态，如下所示： <Link to={{ pathname:`/transactions/${props.transaction.id}`, state: {transaction: props.transaction} }}> View Details </Link> 我的逻辑是，如果“location.state.transaction”存在，则不获取新数据，否则获取数据。 现在的缺陷是页面重新加载时。如果用户重新加载页面，应用程序需要获取新数据。我认为如果重新加载，“location.state”会被清除，但显然状态保存在 sessionStorage 中。 我该如何解决这个问题？ 我可以每次都获取新数据，但单击“查看详细信息”链接时不应获取数据。 如果您使用的是 React hooks，则可以直接使用 window.history 来清除状态而不触发重新渲染。这比使用 useHistory 钩子的 replace 方法要好，后者会导致组件重新渲染。 window.history.replaceState({}, '') 我也遇到了这个问题，我最终所做的是从 React Router 检索浏览器历史记录并清除特定的 location.state 属性。所以在你的情况下，它会是transaction。我在 componentDidMount 中执行了此操作，以便在您第一次访问该页面后，该属性不应再存在， import createHistory from 'history/createBrowserHistory' ... componentDidMount(){ const history = createHistory(); if (history.location.state && history.location.state.transaction) { let state = { ...history.location.state }; delete state.transaction; history.replace({ ...history.location, state }); } } 有更好的方法，无需使用 3 方库。 我们可以使用history.replace() https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md componentDidMount(){ const {location,history} = this.props; //use the state via location.state //and replace the state via history.replace() } 在 React Router V6 中，您可以使用 useNavigate() 清除当前路径的状态： import React, { useEffect } from "react"; import { useLocation, useNavigate } from "react-router-dom"; useEffect(() => { const location = useLocation(); const navigate = useNavigate(); navigate(location.pathname, {}); // reload and pass empty object to clear state // we can also use replace option: ..., {replace: true} }, []); 使用状态后，再次调度一个空状态的操作来清理状态。 this.props.dispatch(replace({ ...this.props.location, state: undefined }); history.replace({ state: {} })。 如果您还想将用户重定向到某个地方，请使用 history.replace({ pathname: '/profile/me', state: {} }) 在 React Router v6 中，您可以执行以下操作： const location = useLocation(); const navigate = useNavigate(); const state = location.state; // Do some stuff with the state // ... // Clear the state after navigate(location.pathname, { replace: true }); 导航到当前页面除了清除状态（修改历史记录）之外不会产生任何可见效果。 这可能有效。 const history = useHistory(); // consume the history.location.state and reset the state useEffect(() => { history.replace(`/transactions/${history.location.state.transaction.id}`, {}); }, []); 我建议不要在这里使用 location 属性，而是创建一个带有路径 /transactions/:transactionId 的路线（无论你在哪里定义它们），并在目标内部的 transactionId 属性中捕获 props.match.params.transactionId成分。然后在 componentDidMount 中，您可以调度 API 请求操作以获取交易。不要忘记从链接的 props 中删除 state 参数。 这些都不会使用 useNavigate 重置我的状态。我要做的就是在导航上设置 useEffect。 ... const navigate = useNavigate() ... useEffect(() => { // set state here .... },[navigate]
我将以下代码导出为 CommonService.tsx 并调用为 COMMON.redirect('/'); 从“react-router-dom”导入{useNavigate}； 导出函数重定向（路由：字符串）{ c...
在我们的项目中，我们使用的是react-router版本4，我们已经迁移到版本6。 然而，自从 useLocation API 更改为
我是 React 新手，我不明白如何在页面之间导航/路由。 我开发了一个电子商务网站，在第一页我有图像，我想为每个图像单击打开一个新的不同页面...
结合使用react useState和useLoaderData会抛出无限循环错误
初始情况： 我有一个元素“root”，它在每次调用时检查用户是否经过身份验证。我目前正在尝试新的 React-Router V6 并遇到了如此-
React + MSAL + React Router 6.4.1（最新版本）加载器功能问题
亲爱的 React 开发者们。 当您需要时，有人可以解释或展示在当前最新版本 6.4.1 中将 MSAL 与 React Router 结合使用时的最佳方法吗...
我想知道是否有更好的方法来隐藏/不渲染反应路由器对象中的父内容。我可以通过条件渲染来解决它，但我不确定这是最好的方法。我有父母，...
REACTJS 给出以下错误：TypeError: navigator.push is not a function
我正在尝试为我的react.js 网站实现一个主页。我的布局很好，我的代码编译没有问题。 但是，当我单击按钮时，我在网站上收到以下错误
我试图在用户访问网站的任何部分之前对用户进行身份验证，但出现空白页面并且用户没有重定向。 代码： 认证功能： 导入{重定向...
我正在实现一个 React Router，需要将一些参数从 url 路径传递给函数。 我的函数需要以下类型的参数： 接口路径参数{ appTypeId：字符串|...
我正在实现一个 React Router，需要将一些参数从 url 路径传递给函数。 我的函数需要以下类型的参数： 接口路径参数{ appTypeId：字符串|...
React Router - 仅在路径参数存在时调用加载器函数
我正在实现新的 React Router。我正在使用加载器函数来根据正在加载的元素来获取数据。 我想要发生的是，无论某些 api 的路由如何，都应该...
我正在使用最新版本的 React Router，并且想从 URL 字符串中获取一些可选参数。 有两个参数，appTypeId 和submissionId，它们都是可选的，但是它们...
我正在使用 React Router v5，我想知道如何在一个路径中同时匹配 /add_a 和 /add 。 我已经尝试过 TEST} />，但我收到了警告...
reactjs - 在单元测试中使用 getByRole 查找 Navlink
在我的 React 测试库单元测试中，我无法按角色获取 Navlink。 getByRole('link', { name: 'help' }) - 失败 导航链接没有文本，而是有一个帮助图标，看起来......
如何使用 Enzyme 为 React Router 创建 URL 参数的单元测试
我正在尝试使用 React Router 的 Enzyme 来测试 url 参数。到目前为止，该应用程序很简单。我有 App.jsx，它有一个 组件，还有一个 组件和 t...
React Router useRouteLoaderData TypeScript 错误
我正在使用 React Router 来处理获取数据并将其传递给组件。 我看到 TypeScript 错误，指出类型“未知”不可分配给类型“{ name: string;”值：字符串； }'。 它...
我正在使用React v18.2.0和React测试库v5.17.0。 我应该如何对导航栏中的 NavLink 进行单元测试？ 我认为这个测试应该有效，但我收到错误： 预期：“关于...
如何在react router dom中的单个路由中使用多个操作？
我在不同的组件中有两种形式。我正在另一个组件中显示结果。我正在使用react-router-dom中的。并使用操作获取数据。如果我...，效果很好 我有两种不同组件的表单。我正在另一个组件中显示结果。我正在使用 <Form> 中的 react-router-dom。并使用 action 获取数据。如果我采取一项行动，效果很好。所以我尝试添加一个额外的action，比如， { path: '/show-result`, element: <ShowResult />, action: actionFromFirstComponent, action: actionFromSecondComponent } 它没有按预期工作。我也尝试过action: [actionFromFirstComponent, actionFromSecondComponent]。但是 react-router-dom 给我带来了 handler is not a function 错误。 我尝试在谷歌中搜索反应路由器路由中的多个操作。但是，它只展示了如何为一个组件设置多个路由。 您只能执行一个操作。单个操作应该获取额外的数据，以便它可以有条件地应用一种或另一种操作逻辑。一种方法是附加一个隐藏的 id 字段，该字段将在提交表单时与 formData 一起提交。该操作应读取此字段值并有条件地应用正确的操作逻辑。 示例： const multiFormAction = async (actionArg) => { const formData = await actionArg.request.formData(); const formId = formData.get("form-id"); switch (formId) { case "form 1": // This is form 1 logic return actionFromFirstComponent(actionArg); // <-- pass action arg through case "form 2": // This is form 2 logic return actionFromSecondComponent(actionArg); // <-- pass action arg through default: // Form was submitted without an id // What to do... throw or return error? Ignore? You decide. } }; { path: '/show-result`, element: <ShowResult />, action: multiFormAction, } ... <Form method="post"> <input name="form-id" hidden defaultValue="form 1" /> ... <button type="submit">Submit</button> </Form> ... <Form method="post"> <input name="form-id" hidden defaultValue="form 2" /> ... <button type="submit">Submit</button> </Form> ... 您可以使用按钮上的名称和值，并在提交时使用它们来区分。 async function action({ request }) { let formData = await request.formData(); let intent = formData.get("intent"); if (intent === "edit") { await editSong(formData); return { ok: true }; } if (intent === "add") { await addSong(formData); return { ok: true }; } throw json( { message: "Invalid intent" }, { status: 400 } ); } function Component() { let song = useLoaderData(); // When the song exists, show an edit form if (song) { return ( <Form method="post"> <p>Edit song lyrics:</p> {/* Edit song inputs */} <button type="submit" name="intent" value="edit"> Edit </button> </Form> ); } // Otherwise show a form to add a new song return ( <Form method="post"> <p>Add new lyrics:</p> {/* Add song inputs */} <button type="submit" name="intent" value="add"> Add </button> </Form> );