使用此标记可以了解有关DOM使用和React Router v4绑定的问题。
React router dom v6.26.1 更改 url 但不重新渲染组件
点击按钮后，我遇到页面刷新问题，浏览器中的网址发生更改，但页面没有刷新正确的组件，没有浏览器错误，没有终端错误，
我无法获取React中是否可能有“多个嵌套”Outlet和router dom的信息。我使用 createBrowserRouter 创建了一些受保护的路由： 常量路由器 =
如何使用多个Outlet（React router dom 6.26.1）
我无法获取React中是否可能有“多个嵌套”Outlet和router dom的信息。我使用 createBrowserRouter 创建了一些受保护的路由： 常量路由器 =
React Router v6.10 AuthContext + createBrowserRouter - 导航问题
我正在尝试使用反应路由器创建一个具有受保护路由的应用程序。我使用官方示例（https://github.com/remix-run/react-router/tree/dev/examples/auth）来创建应用程序。
React 和 Jest：无法从 React-router-dom 模拟 Link 功能
我正在尝试从react-router-dom模拟Link对象。我已经成功地模拟了钩子。 我的模拟： jest.mock("react-router-dom", () => ({ 使用位置：jest.fn().mockReturnVa...
使用redux工具包与createApi进行react，但组件需要重新渲染3次，但是当页面加载时，总是需要渲染一次
使用redux工具包与createApi反应，但组件3次重新渲染，使用redux工具包与createApi反应，但组件3次重新渲染，但页面加载时，总是需要重新...
React-router errorElement 未捕获子路由上的错误（来自函数内）
我正在使用React router dom版本6.25.1。 我的路由器定义为 常量路由器= [ { 元素: , 装载机：我的装载机， 错误元素：...
我尝试将按钮包装在带有 to="/path" 属性的 Link 标签中，并尝试用 Link 标签替换 Button 标签，但组件仍然无法呈现。 这里是我使用的所有反应组件，我不能......
这是我的主要反应文件： // 应用程序.tsx 常量应用程序：FC = () => { const isLoggedIn: boolean = localStorage.getItem('logged_user') !== null; 返回 （ 这是我的主要反应文件： // App.tsx const App: FC = () => { const isLoggedIn: boolean = localStorage.getItem('logged_user') !== null; return ( <BrowserRouter> <Routes> <Route path="/main" element={isLoggedIn ? <Main/> : <Navigate to='/login'/>}/> <Route path="/about" element={isLoggedIn ? <About/> : <Navigate to='/login'/>}/> <Route path="/login" element={<Login/>}/> </Routes> </BrowserRouter> ); } export default App; 登录后，我将用户存储在本地存储中。 我想实现当用户未经身份验证时重定向到/登录页面的行为（当它没有存储在本地存储中时）。 一般来说，上述方法是有效的，但只是有时有效。有时，当我转到 '/main' 时，即使我已经登录，我也会被重定向到 '/login'。我认为这是由 React 的重新渲染性质引起的。 我该如何解决这个问题？ 我喜欢这样做的方式是创建一个 <PrivateRoute/> 组件，这样就可以清楚地看出，无论嵌套什么路由都需要经过身份验证的用户。 const PrivateRoute = (props: { children: React.ReactNode }): JSX.Element => { const { children } = props const isLoggedIn: boolean = localStorage.getItem('logged_user') !== null; const location = useLocation() return isLoggedIn ? ( <>{children}</> ) : ( <Navigate replace={true} to="/login" state={{ from: `${location.pathname}${location.search}` }} /> ) } 然后在你的 App.tsx 中 const App: FC = () => ( <BrowserRouter> <Routes> <Route path="/main" element={<PrivateRoute> <Main/> </PrivateRoute>}/> <Route path="/about" element={<PrivateRoute> <About/> </PrivateRoute>}/> <Route path="/login" element={<Login/>}/> </Routes> </BrowserRouter> ) 作为附加功能，传递给 from 组件中的状态的 <PrivateRoute/> 变量允许您在登录后将用户重定向回他们来自的页面。 我猜测重定向到“/login”第一次会起作用，您登录，然后尝试导航到“/main”或“/about”并被重定向回“/login”，直到您执行类似的操作页面重新加载并读取任何持久的“logged_user”状态，然后陷入困境，无法注销并重定向回“/login”。 您应该将 isLoggedIn 值存储在本地状态中，从 localStorage 初始化，并在应用程序中提供一种切换状态的方法。使用 useEffect 挂钩将本地状态更改保留回 localStorage。 示例： const App: FC = () => { const [isLoggedIn, setIsLoggedIn] = useState<boolean>( () => localStorage.getItem('logged_user') !== null ); useEffect(() => { localStorage.setItem('logged_user', JSON.stringify(isLoggedIn)); }, [isLoggedIn]); const logIn = () => setIsLoggedIn(true); // pass this callback to components you want to allow logging out // it will update the local state and then get persisted const logOut = () => setIsLoggedIn(false); return ( <BrowserRouter> <Routes> <Route path="/main" element={isLoggedIn ? <Main/> : <Navigate to='/login'/>}/> <Route path="/about" element={isLoggedIn ? <About/> : <Navigate to='/login'/>}/> <Route path="/login" element={<Login onLogIn={logIn} />}/> </Routes> </BrowserRouter> ); } 这个问题已经回答过一段时间了，但我觉得答案都有点太冗长了。 这是使用“catch-all 重定向”进行设置的另一种方法。 我根据已接受的答案改编了代码。 当您切换 isLoggedIn 的值时，现有路由会发生变化，全能重定向会检测到未知路径并将您送回您选择的页面。 React Fragments 允许您在没有包装器节点的情况下对元素进行分组，这很重要，因为 <Routes> 子级必须都是 <Route> 组件。 const App: FC = () => { const [isLoggedIn, setIsLoggedIn] = useState<boolean>( () => localStorage.getItem('logged_user') !== null ); useEffect(() => { localStorage.setItem('logged_user', JSON.stringify(isLoggedIn)); }, [isLoggedIn]); const logIn = () => setIsLoggedIn(true); // pass this callback to components you want to allow logging out // it will update the local state and then get persisted const logOut = () => setIsLoggedIn(false); return ( <BrowserRouter> <Routes> { isLoggedIn ? <React.Fragment> <Route path="/main" element={<Main/>}/> <Route path="/about" element={<About/>}/> {/* default redirect to main page */} <Route path="*" element={<Navigate to="/main" />} /> <React.Fragment/> : <React.Fragment> <Route path="/login" element={<Login onLogIn={logIn} />}/> {/* default redirect to login page */} <Route path="*" element={<Navigate to="/login" />} /> <React.Fragment/> } </Routes> </BrowserRouter> ); }
NextJS 项目的 Vercel 部署（参考错误：文档未定义）
最近我完成了 Next.js 项目，一切都很顺利。在编译过程中，终端给了我一堆错误（我将在下面显示），尽管该项目已经完成......
我正在使用 React 作为我的 Web 应用程序前端。然而，在开发过程中，我遇到了react-router-dom V6的路由问题。这个问题是我想显示 404 错误页面，如果没有 ro...
React router-dom 无法工作，我需要测试管理日志
我是react.js 的初学者。我有一个问题。当我放置布局组件时，链接和其他根不起作用。我有一个管理页面，我需要测试用户。我怎样才能解决这个问题。而我...
React Router v6 嵌套惰性与 useRoutes 挂钩问题
使用react-router v6和react v18。我不确定我错过了什么，但似乎带有惰性的嵌套组件不起作用。 我有这个文件结构： 路线/root.tsx 路线/概况/
我需要路由到Tags页面，路由URL为“/category”，这样点击的所有新闻类别的显示都会显示在tags.jsx页面上。 应用程序.jsx 导入'./App.css' 导入
使用共享 React hook 成功登录或注销重定向后更新导航栏
我在React中有一个简单的身份验证应用程序，问题是当用户登录时，他被重定向到他的个人资料，但我的导航栏组件未正确呈现。仅应用更改...
我有一个带有多个路由的 React + Vite 应用程序。我的公共文件夹中还有一些静态 HTML 页面和资源（包括 home.html）。 我想让索引路由指向 home.html。那个...
我需要帮助，当用户没有专门进行身份验证时，当令牌过期时，我尝试重定向用户。 但是当用户重定向到登录页面时，如果用户想再次登录。他们必须点击手柄...
我正在使用react-router-dom 5.2.0 应用程序.jsx ` 我正在使用react-router-dom 5.2.0 应用程序.jsx `<Route path="/shop"> <ProductListPage /> </Route> <Route path="/shop/:page"> <ProductListPage /> </Route> <Route path="/shop/:gender/:category?"> <ProductListPage /> </Route> <Route path="/shop/:filter"> <ProductListPage /> </Route>` 产品列表页面.jsx `import { useParams } from "react-router-dom"; export default function ProductListPage() { let { page } = useParams(); let { gender, category } = useParams(); let { filter } = useParams(); console.log(page + " " + gender + " " + filter + " " + category); return ( <div className="bg-light-gray-1"> <ProductCategories /> <ProductList /> <ClientList /> </div> ); }` 无法获取页面或性别或任何其他内容，只是未定义。 我有一页列出所有产品。 第二个是用于分页的 第三个是分类 第四个是过滤 但是我从链接获取的变量不起作用。例如; "/shop/women/tshirt" "/shop/man/shoe" "/shop/1 我尝试获取这样的值，但不断获取未定义的值。 `import { useParams } from "react-router-dom"; export default function ProductListPage() { let { page } = useParams(); let { gender, category } = useParams(); let { filter } = useParams(); console.log(page + " " + gender + " " + filter + " " + category); 在 React-Router-DOM v5 中，路由顺序和路径特殊性很重要。路由按照指定的顺序从上到下匹配，并且 path="/shop" 也匹配所有 path="/shop/*" 路由，因此它是渲染的路由并渲染 ProductsListPage 组件，并且不设置路径参数。这就是为什么 page、gender 和 category 都未定义。 重新排序路线，以便可以先匹配更具体的路线，然后再回退到不太具体的路线。 另请注意，path="/shop/:page" 和 path="/shop/:filter" 具有相同的特异性，因此只能匹配一个或另一个，以先列出的为准。这实际上是一条重复的路线，应该删除一条。 示例： <Switch> ... <Route path="/shop/:gender/:category?"> <ProductListPage /> </Route> <Route path="/shop/:page"> <ProductListPage /> </Route> <Route path="/shop"> <ProductListPage /> </Route> ... </Switch> 或 <Switch> ... <Route path="/shop/:gender/:category?" component={ProductListPage} /> <Route path="/shop/:page" component={ProductListPage} /> <Route path="/shop" component={ProductListPage} /> ... </Switch> React-Router-DOM 5 Route 组件也可以采用路径数组，因此您可以声明单个路由并在数组中传递路径，而不是复制所有渲染相同 ProductListPage 组件的路由。路径顺序在这里仍然很重要。 <Switch> ... <Route path={[ "/shop/:gender/:category?", "/shop/:page", "/shop" ]} > <ProductListPage /> </Route> ... </Switch> 或 <Switch> ... <Route path={[ "/shop/:gender/:category?", "/shop/:page", "/shop" ]} component={ProductListPage} /> ... </Switch> 在 ProductListPage 中，您只需要一个 useParams 钩子调用，所有参数都可以从返回的 params 对象中解构。 import { useParams } from "react-router-dom"; export default function ProductListPage() { const { page, gender, category } = useParams(); console.log({ page, gender, category }); ... }
如何使用 ra-auth-msal 中的 msalAuthProvider 将自定义路由设置为 React-admin 中的默认路由？它似乎默认为我定义的第一个资源路由，但我希望它重定向......
BrowserRouter 内的链接标记仅更改 URL，但不渲染组件
我正在构建一个Netflix克隆应用程序，我正在使用react-router-dom v5在不同页面之间切换。但是，当我单击 Navbar.jsx 中的 Link 标签时，URL 会发生变化，但相应的...