使用此标记可以了解有关DOM使用和React Router v4绑定的问题。
React Router Dom - v6 - useBlocker
https://github.com/remix-run/react-router/issues/8139 已完成，我们在 v6 中得到了 useBlocker，有人让它工作吗？ 这就是我到目前为止所得到的，而且我几乎陷入了错误，我很d...
React JS React-router-dom 导航不起作用
我尝试在登录我的 React 应用程序后重定向用户，但导航不起作用，我不知道为什么...... 这是我的代码，感谢您的帮助 从“react”导入 React, { Component }; ...
我正在使用 React、React Router 和很棒的 Reactivesearch 库构建一个搜索 UI。我正在尝试找出如何阻止用户简单地导航到 mydomain.com/search，因为......
我需要做的事情看起来应该是一个非常简单的重定向，但很难完成它。 const SurveyRoutes = 惰性(() => import('@/features/survey').then(({ SurveyRoutes }) =>...
React 路由器错误：useNavigation 必须在数据路由器内使用
我想使用react-router-dom中的useNavigation()，但出现以下错误： 错误：useNavigation 必须在数据路由器内使用。 请参阅 https://reactrouter.com/en/main/routers/picking-a-rou...
我正在使用 React Router v6 并为我的应用程序创建私有路由。 我必须关闭除登录之外的所有路由，直到用户通过身份验证 这是我的私人路线 从“反应”导入反应； ...
我想在react-router-dom v6中使用私有路由，同时我正在尝试应用身份验证条件。 在 App.js 中 我想使用带有react-router-dom v6的私有路由，而我正在尝试应用身份验证条件。 在 App.js 中 <Route path='/dashboard' element= { <PrivateRoute><Abc /></PrivateRoute>}/> 在组件.js中 <Routes> <Route {...rest} render={props => !isAuthenticated && !loading ? (<Navigate to='/login' />) : (<Component {...props} />)} /></Routes> 当路线不在内部时它会给出错误： 错误：只能用作元素的子元素，从不直接渲染。请用 包裹您的 当它在里面时它给出一个错误： 错误：[Abc] 不是 组件。的所有子组件必须是 或 请帮我解决这个问题吗？或者有什么建议。 尝试过此操作，但在两种情况下都出现上述错误之一 <Route path='/dashboard' element= {<PrivateRoute> <Dashboard /> </PrivateRoute>}/> 还有 `<PrivateRoute path='/dashboard' element= { <Dashboard />}/>` 图片代码完整 在 react-router-dom 版本 6 中，render 组件没有 Route 属性。您还可以稍微简化您的 PrivateRoute 包装器组件，它不需要渲染更多 Routes 和 Route 组件。 有条件地渲染组件的子组件或导航以登录。 const PrivateRoute = ({ auth: { isAuthenticated }, children }) => { return isAuthenticated ? children : <Navigate to="/login" />; }; 用途： <Route path="/dashboard" element={ <PrivateRoute> <Dashboard /> </PrivateRoute> } /> 稍微改进的版本允许嵌套更多私有路由组件，利用插座来处理嵌套路由的渲染。 const PrivateWrapper = ({ auth: { isAuthenticated } }) => { return isAuthenticated ? <Outlet /> : <Navigate to="/login" />; }; 用途： <Route element={<PrivateWrapper />}> <Route path="/dashboard" element={<Dashboard />} /> </Route> 这是一条您可以使用的私人路线，目前正在运行 v6.0.2 export const PrivateRoute = ({ children}) => { const isAuthenticated = true; if (isAuthenticated ) { return children } return <Navigate to="/" /> } 这就是您使用私人路线的方式 <Route path="/dashboard" element={ <PrivateRoute> <Dashboard /> </PrivateRoute> } /> 这是使用 Outlet 的 PrivateRoute 的不同实现 import { Routes, Route, BrowserRouter, Link, Navigate, Outlet } from "react-router-dom"; export default function App() { return ( <BrowserRouter> <MyMenu /> <Routes> <Route path="/" element={<Public />} /> <Route element={<PrivateOutlet />}> <Route path="/private-outlet" element={<Private />} /> </Route> <Route path="/login" element={<Login />} /> </Routes> </BrowserRouter> ); } const Public = () => <div>public</div>; const Private = () => <div>private</div>; const Login = () => <div>login</div>; function PrivateOutlet() { const auth = useAuth(); return auth ? <Outlet /> : <Navigate to="/login" />; } function useAuth() { return true; } function MyMenu() { return ( <nav> <Link to="/">Public</Link> {" | "} <Link to="/private-outlet">Private Using Outlet</Link> </nav> ); } 将 useAuth 从 true 返回到 false，如下所示 function useAuth() { return false; } 然后你就会看到差异。 私有路由组件 import React from 'react' import { Outlet, Navigate } from 'react-router-dom' export default function PrivateRoutes() { let userid = localStorage.getItem("token") == null ? false : true; return ( <> {userid ? <Outlet /> : <Navigate to="/signin" />}; </> ) } App.js： import './App.css'; import { BrowserRouter, Routes, Route } from 'react-router-dom' import Home from './container/Home/Home' import Signin from './container/Signin/Signin' import Signup from './container/Signup/Signup' import PrivateRoute from './components/HOC/privateRoute' function App() { return ( <div className="App"> <BrowserRouter> <Routes> <Route exact element={<PrivateRoute />}> <Route exact path="/" element={<Home />} /> </Route> <Route path='/signin' element={<Signin />} /> <Route path='/signup' element={<Signup />} /> <Route /> </Routes> </BrowserRouter> </div> ); } 对于 Typescript 用户来说，这样的方法是可行的。假设您正在使用 npm 包 react-router-dom。 import { Navigate, RouteProps, } from 'react-router-dom'; export function PrivateRoute({ children }: RouteProps): JSX.Element { const isLoggedIn = checkUser() // check cookie or local storage etc. return ( <> {isLoggedIn ? children : <Navigate to="/sign-in"/> } </> ); } 然后在你的路线中： function App() { return ( <Routes> <Route path="/" element={ <PrivateRoute> <DashboardPage /> </PrivateRoute> } /> <Route path="/sign-in" element={<SignInPage />}/> <Route path="/sign-up" element={<SignUpPage />}/> </Routes> ); }
添加react-router-dom后，Parcel显示以下错误
当我在我的react项目中添加react-router-dom时，使用parcel构建它时会抛出以下错误。我该如何解决这个问题？ 断言错误 [ERR_ASSERTION]：表达式计算结果为假...
ReferenceError：react-router-dom升级到7后未定义TextEncoder
将我的Create-React-app从“react-router-dom^6.27.0”升级到react-router^7.1.1后： npm 卸载 React-router-dom npm 安装react-router@latest 当
如何在React router dom 6中正确使用<Navigate>
从 React Router DOM v4 迁移到 v6 时如何用 Navigate 替换 Redirect？ 路由器 4 示例 路由器 6 示例 从 React Router DOM v4 迁移到 v6 时，如何用 Navigate 替换 Redirect？ 路由器 4 示例 <Redirect from="/dashboard" to="/login" /> 路由器 6 示例 <Route path="/dashboard" element={<Navigate to="/dashboard/home" replace />} 此路由器 6 代码未导航 我建议查看官方文档。 我可以为您提供一个如何使用 React Router 6 的示例（即使具有不同的布局）： import { RouterProvider, createBrowserRouter } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: <HomeLayout />, errorElement: <Error />, children: [ { index: true, element: <Landing />, errorElement: <ErrorElement />, loader: landingLoader, }, { path: "products", element: <Products />, errorElement: <ErrorElement />, loader: productsLoader, }, ], }, { path: "/login", element: <Login />, errorElement: <Error />, }, { path: "/register", element: <Register />, errorElement: <Error />, }, ]); const App = () => { return <RouterProvider router={router} />; }; export default App;
即使在使用exact之后，React Routing 仍然显示根组件
我仍然是 React 的新手。所以这里我用两条路由渲染根组件：Home 和 About 分别位于功能组件：home.js 和 about.js 中。然而，即使使用后
React 应用程序在部署后在 gh-pages 上显示空白屏幕 - SO 的现有建议已实施
我正在尝试使用react-router-dom部署我的react应用程序，以使用github页面进行客户端重定向。 部署后，我得到一个空白页面 - 除了那个之外，没有任何组件加载到 DOM 中......
react-router-dom useHistory() 不起作用
useHistory() 挂钩在我的项目中不起作用。我把它放在不同的组件中，但它们都不起作用。 我正在使用“react-router-dom”：“^5.2.0”， 从 'r... 导入 {useHistory}
我们如何管理useParams的行为 它如何在 useEffect 之前或之后触发 从'react'导入react,{useEffect} 从 'react-router-dom' 导入 {useParams} 导出默认Slip(){ c...
为了检索当前的查询参数，我使用这个： 从'react-router-dom'导入{useLocation}； 函数 useQuery() { 返回新的 URLSearchParams(useLocation().search); } 然后我...
react-router 6.0 - useLoaderData 返回一个承诺。无法显示数据
https://github.com/erAnusriM/react_router_Trial 上面是我的github仓库。 如何实现在 App.jsx 文件中打印从 API 返回的用户列表 当我打印结果的值时...
无法从模块“react-router”加载文件“./dom” - React router dom
我已经安装了最新的react router dom，并在package.js中显示“react-router-dom”：“^ 7.0.2”。当我检查npm -v react-router-dom时，它显示10.9.0。在我的代码中
如果两个路径使用相同的元素，React 路由器不会重新加载组件
我设置了以下两条路径 } /> } /> 在
我在 SPA 的第一页上有一个表单，它使用 React router v6，在特定情况下应该阻止后退导航。为了简化这一点，我们可以说它必须始终阻止后退导航...
问题有简单的代码示例 从“react-router-dom”导入链接； 常量图像 = () => ( 问题有简单的代码示例 import Link from 'react-router-dom'; const Image = () => ( <img src="https://link-with-404-error" alt="Placeholder" onLoad={() => console.log('load')} onError={() => console.log('show error')} /> ) const MainComponent = () => ( <Link to="some-link-to"> <Image /> </Link> ) 我遇到了一些魔法，我不明白，当我有一个图像组件的链接包装器时，onError 和 onLoad 事件不会触发，但是当我删除链接包装器时 const MainComponent = () => ( <Image />) 一切正常，我看到控制台日志结果。 我尝试这样使用 onError={(e) => { e.stopPropagation() console.log('show error') }} 但这对我没有帮助 您导入链接不正确。而不是像这样导入默认导入： import Link from 'react-router-dom'; 您应该仅导入链接： import {Link} from 'react-router-dom'; 也许应用程序中的所有代码都停止工作，并且您看不到图像控制台日志。 我创建了沙箱示例，显示正确导入的链接不会阻止图像日志的出现： 沙盒示例