使用此标记可以了解有关DOM使用和React Router v4绑定的问题。
[在此输入图片描述](https://i.sstatic.net/YFrlUbTx.png) 我试图通过在终端中写入“npm i react-router-dom”来安装react router dom,但它不断显示此错误。可以
react-router-dom 包中的错误边界与 errorElement
我正在学习如何使用react-router-dom。我刚刚在 createBrowserRouter 函数中遇到了 errorElement 属性。我理解 errorElement 属性是如何工作的,但我不明白...
如何在单击方法react js上的按钮后重定向另一个页面[重复]
这是我的login.js页面代码,我想在单击按钮后重定向新页面。我尝试了多种方法但问题没有解决。一切工作正常。但我不知道如何链接...
如何使用自定义 ScrollToTop 组件防止 React Router 中某些链接滚动到顶部
我使用 React Router 和自定义 ScrollToTop 组件来将滚动位置重置到导航页面的顶部。但是,我有一个特定的用例,我需要滚动位置......
在此代码中,我的第一个组件运行正常,但第二个组件(ProductList)根本没有显示在屏幕上,有什么想法吗? 从“react-router-dom”导入{路由,路由};
我正在尝试从标头打开一个组件。我尝试过路线。当我单击链接的图标时,它将 /componentName 添加到本地主机,但没有任何反应
这是我的App.js 从“./Components.js/Heading.js”导入标题 导入'./App.css' 函数应用程序(){ 返回 ( ); } 出口德法...
react-router v6:使用 searchParams 导航到 URL
我正在使用react-router v6。我想导航到具有 searchParams 的 URL,但我没有找到开箱即用的方法。 useNavigate 允许我通过传入字符串来导航到 URL。
“IntrinsicAttributes”类型上不存在属性“history”
我正在 Router 中包装 React 应用程序并传递 createBrowserHistory 属性。但是获取“类型‘IntrinsicAttributes & RouterPops’上不存在属性‘历史记录’” 这是我的index.tsx
useLocation Hook 错误:React 应用程序中的“useLocation() 只能在 <Router> 组件的上下文中使用”
我正在开发一个React应用程序,在使用react-router-dom库中的useLocation钩子时遇到错误。我收到的错误消息是: 错误:可能会使用 useLocation() ...
使用路由部署Vite构建(react-router-dom)
我为一位想要在托管商上托管客户的客户建立了一个网站。我们遇到的问题是除了“/”之外没有找到任何路由。我假设...
从“react”导入React; 从 'react-router-dom' 导入 { BrowserRouter as Router, Route, Switch }; 从 './components/Onboarding/Onboarding' 导入 Onboarding; 从 './components/Lo... 导入登录名
在ReactJS和react-router-dom v4中处理特定于用户的唯一生成的URL的路由
在我正在开发的应用程序中,如果用户忘记了密码,他们会单击一个链接,将他们带到输入用户名的页面。如果用户名匹配,它会发送一个唯一生成的...
我有一个带有 Webpack 5 配置的 React+Typescript 应用程序,是从头开始构建的。对于路由,我使用 React Router DOM 6.23.1。在开发模式下,路由按预期工作,但在我构建之后...
使用此存储桶策略: { "版本": "2012-10-17", “陈述”: [ { "Sid": "PublicReadGetObject", "效果": "允许", “主要的”: ”*”, ...
我正在尝试按照本文档将反应组件添加到网页:https://react.dev/learn/add-react-to-an-existing-project 我在 HTML 页面中导入 JS 文件,如下所示: <question vote="-1"> <p>我正在尝试按照本文档向网页添加反应组件:<a href="https://react.dev/learn/add-react-to-an-existing-project" rel="nofollow noreferrer">https://react.dev/learn/add-react-to-an-existing-project</a></p> <p>我在 HTML 页面中导入 JS 文件,如下所示:</p> <pre><code><script src="./contact.js" type="module"></script> </code></pre> <p>使用 <pre><code>type="module"</code></pre> 我收到错误 <pre><code>Unexpected token '<'</code></pre>。如果没有这个,我会收到错误<pre><code>SyntaxError: Unexpected token '{'. import call expects one or two arguments.</code></pre></p> <p>.js 文件如下:</p> <pre><code>import { createRoot } from 'react-dom/client'; // Clear the existing HTML content document.body.innerHTML = '<div id="app"></div>'; // Render your React component instead const root = createRoot(document.getElementById('sec1')); root.render(<h1>Hello, world</h1>); </code></pre> <p>我的 HTML 文件中有一个 div:</p> <pre><code><div id="sec1"></div> </code></pre> <p>HTML、JS文件、包文件、node_modules文件夹都在同一个目录下。我不确定为什么没有渲染任何内容。</p> </question> <answer tick="false" vote="1"> <p>可能出现的错误是</p> <ol> <li>您是否使用 vite、parcel 或 webpack 等打包器? 如果没有,你需要添加 babel 来编译 jsx 或将其添加到你的 html head 标签中</li> </ol> <p>2.因为你已经通过改变它的innerhtml来清除你的body,所以名为sec1的div消失了 并在这一步 const root = createRoot(document.getElementById('app'));</p> <p>你必须做 const root = createRoot(document.getElementById('sec1'));</p> </answer> </body></html>
在React中混合useNavigate和useHistory
在我现在的工作场所,我要做的项目到目前为止一直在使用useHistory。我知道在较新的版本中通常最好使用 useNavigate。可以吗(不中断...
我突然收到这个错误,不知道为什么。我没有更改“react-router-dom”:“^6.0.0-beta.4”版本。但是“react-dom”:“^16.8.4””已经改变了......
我正在尝试使用react-router-dom为名为“Shop”、Contact和Cart的组件实现分页。 为了存储 URL 路径,我使用了一个数组。 状态变量用作数组...
React 路由器 dom 导航在 useRoutes 中不起作用
导出默认函数 Router() { const [存储,调度] = useStore(); const handleAppRedirect = () => { if (store.token === null) { 返回 export default function Router() { const [store, dispatch] = useStore(); const handleAppRedirect = () => { if (store.token === null) { return <Navigate to="/login" />; } else if (isTokenExpired()) { (async () => { await dispatch({ type: "LOGOUT" }); })(); return <Navigate to="/login" />; } else { return <MainLayout />; } }; return useRoutes([ { path: "/", element: handleAppRedirect(), children: [ // Redirect from "/" to "/cars/list" { path: "/", element: <Navigate to="/cars/list" replace /> }, { path: "/cars/list", element: <Home /> }, ] }, { path: "/login", element: store.token === null ? <Auth type="login" /> : <Navigate to="/" replace />, }, { path: "*", element: <NotFound /> }, { path: "/oops", element: <WentWrong /> }, ]); } 当路径为“/”时,只显示我的MainLayout。如果我手动提供“/cars/list”,页面将使用 MainLayout 正确呈现。 MainLayout组件组织应用程序的主要内容(Outlet) <MainStyle> <PageLayout config = {pagesConfig}> <Outlet /> </PageLayout> </MainStyle> 当导航到“/”时,我希望它导航到“/cars/list”,但它只显示主要布局,内部没有任何出口。 天哪,他们有没有改变过 React Router。我有 5 个关于 v.4 的项目。不期待那些迁移。 无论如何,在我看来,你正在将 <Navigate to="/cars/list" replace /> 映射到“//”(这甚至是一个有效的 URL 路径吗?)。您依赖于 handleAppRedirect,因此将重定向组件作为 element 字段传递并不是真正的选择。您可以尝试使用空路径。我不知道它是否会起作用,React Router 可能会因为你传递了一条空路径而对你大喊大叫。或者,您最终可能需要在 <Home /> 组件中处理重定向。
如何避免 React Router Link 在转到动态路由之前先转到根路由“/”?
我想做的是使用 Reddit API 在我的项目中进行搜索流程。 用户进行搜索 Web 应用程序返回包含搜索查询的 Subreddits 每个 Subreddit 组件都有一个链接