react-router 相关问题

React Router - 一个完整的React路由库，灵感来自Ember的路由系统

React Router useRouteLoaderData TypeScript 错误

我正在使用 React Router 来处理获取数据并将其传递给组件。我看到 TypeScript 错误，指出类型“未知”不可分配给类型“{ name: string;”值：字符串； }'。它...

reactjs typescript react-router

回答 1 投票 0

React 中的单元测试 NavLink 导航

我正在使用React v18.2.0和React测试库v5.17.0。我应该如何对导航栏中的 NavLink 进行单元测试？我认为这个测试应该有效，但我收到错误：预期：“关于...

reactjs jestjs react-router react-testing-library

回答 1 投票 0

如何在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> );

reactjs react-router

回答 2 投票 0

React Router 如何使用从加载器返回的数据

我正在努力实现一个新的 React Router。我正在使用新的 createBrowserRouter 并想要实现一些 loader api 调用。我已经设置了我的项目来正确地进行这些 api 调用，但是......

javascript reactjs react-router react-router-dom

回答 1 投票 0

react-router v6 动态路径正则表达式

在react-router v5中，我能够通过以下方式指定一组特定的动态路径属性： '/some-path/:someDynamicProperty(value1|value2|value3)' 因此，唯一现有的选择...

reactjs react-router react-router-dom

回答 1 投票 0

react-router v6 动态路径联合

在react-router v5中，我能够通过以下方式指定一组特定的动态路径属性： '/some-path/:someDynamicProperty(value1|value2|value3)' 因此，唯一现有的选择...

reactjs react-router react-router-dom

回答 1 投票 0

react-router v6 <Route />组件不允许我将<Navigate />渲染为元素

我正在尝试为我的应用程序创建受保护的路线，但路线组件似乎不接受作为元素。我试图：进口 { BrowserRouter 作为路由器，导航，路线，路线， } 来自 '反应-

reactjs react-router react-router-dom

回答 2 投票 0

是否可以将2个不同的React JS应用程序加载到另一个React JS应用程序？就像嵌套循环

我们目前有 2 个团队正在开发网站。他们正在发展教师方面，我们正在建设学生方面。我们目前正在开发单独的反应应用程序。现在我们的网络应用程序...

reactjs react-native react-router

回答 1 投票 0

React router 6 - 避免重新渲染嵌套子路由的父组件

这是我的路线： ... 这是我的路线： <Routes> <Route path="A"> <Route path=":date" element={ <ProviderA> <ProviderB> <Summary /> </ProviderB> </ProviderA> } /> </Route> </Routes> 这是组件ProviderA: const ContextAction = createContext({ ... }); const ContextValue = createContext({ ... }); export const ProviderA: React.FC<Props> = ({children}) => { const [state, setState] = useState(''); return ( <ContextAction.Provider value={setState}> <ContextValue.Provider value={state}> {children} </ContextValue.Provider> </ContextAction.Provider> ); }; 这是组件 ProviderB: const ContextAction = createContext({ ... }); const ContextValue = createContext({ ... }); export const ProviderB: React.FC<Props> = ({children}) => { const [state, setState] = useState(''); return ( <ContextAction.Provider value={setState}> <ContextValue.Provider value={state}> {children} </ContextValue.Provider> </ContextAction.Provider> ); }; 我想要实现的是仅在 URL 中的日期发生更改时呈现 Summary。例如，URL 从 A/26-01-2024 更改为 A/25-01-2014 不应触发 ProviderA 的重新渲染；相反，它应该仅重新渲染子嵌套路由Summary。希望以上内容是有道理的，即使它很棘手。我想要实现的是当日期在网址确实改变了。这就是 React 的工作原理。如果您不希望 ProviderA 和 ProviderB 在路由重新渲染时重新渲染，请将它们移至 ReactTree 的更高位置。我建议创建一个渲染提供者的布局路由和一个用于嵌套路由的Outlet。示例： import { Outlet } from 'react-router-dom'; export const ProviderLayout = () => ( <ProviderA> <ProviderB> <Outlet /> </ProviderB> </ProviderA> ); <Routes> <Route path="A"> <Route element={<ProviderLayout />}> <Route path=":date" element={<Summary />} /> </Route> </Route> </Routes> 如果重新渲染仍然是一个问题，那么继续将提供程序推到 ReactTree 上越来越高，直到它们从一个稳定的组件渲染，该组件在路由重新渲染时不会重新渲染。

reactjs react-router

回答 1 投票 0

React Router createBrowserRouter 与浏览器路由器

我正在启动一个新的 React 项目，并希望使用最新版本的 React Router。文档建议对所有 Web 项目使用 createBrowserRouter。他们没有说为什么它比使用更好

javascript reactjs react-router

回答 1 投票 0

添加 onClick 到 React 路由

我希望我的按钮能够：首先通过其 onClick 回调触发 POST 请求然后使用react-router工具导航到另一个页面我对每个案例都有建议。这就是我如何实现

reactjs react-router

回答 1 投票 0

React Router Dom 有条件渲染元素

我正在建立一个新项目并使用最新版本的react-router-dom。他们的文档建议使用我正在努力实现的 createBrowserRouter 。我想要实现的是

javascript reactjs react-router react-router-dom

回答 1 投票 0

反应Route使用render时如何有区分大小写的路径？

我看到 Route 现在支持敏感属性以确保路径区分大小写。我用我的实现尝试过，但没有成功：我看到 Route 现在支持 sensitive 属性以确保路径区分大小写。我用我的实现尝试过，但没有成功： <Route sensitive path="/somePath" render={props => ( <Page> <PageName {...props} /> </Page> )} /> 当我导航到 somepath 时，它仍然会将我重定向到 somePath。我需要对正在使用的渲染函数做一些不同的事情吗？编辑：我正在尝试使我的 URL 区分大小写。因此导航到 somepath 应该会失败；它不应该将我重定向到somePath。您尝试过使用 caseSensitive 道具吗？它指示路由是否匹配大小写： <Route caseSensitive path="/wEll-aCtuA11y" /> 上面的示例将匹配“wEll-aCtuA11y”，但不会匹配“well-actua11y”。

reactjs react-router

回答 1 投票 0

在 Formik 中捕获 React Router 操作的错误

我用React Router操作和加载器编写了一个应用程序，后来我将react Form更改为Formik表单，它使用useSubmit钩子发送数据。有什么方法可以捕获操作函数中的错误...

reactjs react-router formik

回答 1 投票 0

如何在React Router 6中添加预加载器

我正在尝试在我的个人网站中添加预加载器。问题是无法让它发挥作用，正如你在图片中看到的 [1]：https://i.stack.imgur.com/4TLGD.png 我尝试在溃败之前渲染它......

reactjs react-router preloader

回答 1 投票 0

如何使用React路由器导航测试hooks？

当挂钩具有一些导航逻辑时，我在使用 renderHookutility 测试挂钩时遇到一些问题。我无法在测试中模拟导航。例如，让我们看一下这个示例钩子出口