react-router 相关问题

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

App.js 组件包含和组件。我希望根据页面组件进行更新。我在 App.js 文件中使用react-router。我该如何... App.js 组件包含 <Header /> 和 <Page /> 组件。我希望 <h1> 根据页面组件进行更新。我在 App.js 文件中使用react-router。如何将标题设置为每个页面组件中的道具？例如，About页面组件为： import React, { Component } from 'react'; class About extends Component { componentDidMount(){ this.setState({ title: 'About Us' }); } render() { return ( <div className="about container"> <p>Page content.</p> </div> ); } } export default About; 而 Header 组件是： import React, { Component } from 'react'; import Nav from '../Nav'; import About from './components/About'; class Header extends Component { constructor(props) { super(props); this.state = { title: this.props.title }; } render() { return ( <div className="header"> <h1>{this.state.title}</h1> <Nav /> </div> ); } } export default Header; 简单来说，你可以使用 React Router 来获取 App.js 组件中的当前路径名。根据当前路径名，您可以将名为“title”的 prop 发送到标头，其中包含相应的所需名称。例如 getTitle = () => { switch(this.props.location.pathname){ case "about": return "About us"; case "login": return "Login to app"; default: return "[APP_NAME]" } } 通过这种方式，您可以在一个位置捕获父组件中的当前路径名，从而以这种方式保持您的应用程序的通用性。 const location = useLocation(); useEffect(() => { const countNotif = count === 0 ? `` : `[${count}]`; const loc = location.pathname.split("/"); let title = `${countNotif} Dashboard | `; for (let i = 1; i < loc.length; i++) { if (i === 3) break; const routeTitle = String(loc[i] || ""); const capitalizedTitle = routeTitle.toCapitalize(); title += ` ${capitalizedTitle}`; } document.title = title; }, [location.pathname, event]);

reactjs react-router

回答 2 投票 0

Supabase Auth UI + Google 登录无法访问 AuthProvider

我正在使用 Vite + React Router v6 + Supabase Auth 组件和 Google OAuth 提供商。我仔细检查了 Google 凭据是否在 Supabase 配置中，https://{my_supabase_id}.supaba...

oauth-2.0 react-router supabase supabase-js

回答 1 投票 0

React Router v6 404 / 带基本名称的通配符路由

我正在尝试使用 React Router v6 实现一个应用程序路由器，其基本名称为 /foo：导出常量 appRouter = createBrowserRouter( 从元素创建路由（我正在尝试使用 React Router v6 实现一个应用程序路由器，它有一个基本名称/foo： export const appRouter = createBrowserRouter( createRoutesFromElements( <Route element={<Layout />}> <Route path="/login" element={<Login />} /> <Route path="/requestAccess" element={<RequestAccess />} /> <Route element={<PrivateRoutes />}> <Route path="/createEvent" element={<CreateEvent />} /> <Route index element={<Dashboard />} exact /> <Route path="/admin-console" element={<UserAdminDashboard />} exact /> <Route path="/view-previous" element={<ViewPastEvent />} exact /> </Route> </Route> ), { basename: "/foo", } ); 我想用捕获 404，以便像 localhost:5000/bar 这样的路径会重定向到 localhost:5000/foo，但我的所有路由都作为 /foo 的子级存在，所以我不确定如何实现 404捕获 localhost:5000/foo/this-route-is-a-404 以及 localhost:3000/bar/bar-is-not-the-basename-of-this-app。我尝试添加 <Route path="*" element={<Navigate to="/foo"/>}/> 作为 <Route element={<Layout />}> 的同级元素，但 createRoutesFromElements() 只需要一个根元素。如有任何帮助，我们将不胜感激。我在 React Router 文档中找不到任何有助于解决此问题的内容。我想用 <Route path="*" element={}/> 捕获 404，所以像 "localhost:5000/bar" 这样的路径会重定向到 "localhost:5000/foo"，但我所有的路线都作为 "/foo" 当应用程序从 "/foo" 目录托管时，应用程序和路由器将相对于该路径运行。服务器需要将页面请求从 "/" 重定向到 "/foo"，以将其“引导”到您的应用程序中。您如何处理此问题取决于您的服务器环境或托管服务。当您运行 localhost 时，您通常只需在启动应用程序后手动导航，因为应用程序是从 root 运行的 "/"。我尝试添加 <Route path="*" element={<Navigate to="/foo" />} /> 作为 <Route element={<Layout />}> 的兄弟姐妹，但是 createRoutesFromElements() 只需要一个根元素。您可以在 React.Fragment 组件中渲染同级路由。 export const appRouter = createBrowserRouter( createRoutesFromElements( <> <Route element={<Layout />}> <Route path="/login" element={<Login />} /> <Route path="/requestAccess" element={<RequestAccess />} /> <Route element={<PrivateRoutes />}> <Route index element={<Dashboard />} /> // <-- "/" <Route path="createEvent" element={<CreateEvent />} /> <Route path="admin-console" element={<UserAdminDashboard />} /> <Route path="view-previous" element={<ViewPastEvent />} /> </Route> </Route> <Route path="*" element={<Navigate to="/" replace />} /> // <-- redirect to "/" home path </> ), { basename: "/foo" } ); 但是由于重定向到 "/" 不会在视觉上呈现任何内容，因此没有理由将其呈现在 Layout 布局路线之外。在布局路线中渲染重定向应该同样有效。 export const appRouter = createBrowserRouter( createRoutesFromElements( <Route element={<Layout />}> <Route path="/login" element={<Login />} /> <Route path="/requestAccess" element={<RequestAccess />} /> <Route element={<PrivateRoutes />}> <Route index element={<Dashboard />} /> <Route path="createEvent" element={<CreateEvent />} /> <Route path="admin-console" element={<UserAdminDashboard />} /> <Route path="view-previous" element={<ViewPastEvent />} /> </Route> <Route path="*" element={<Navigate to="/" replace />} /> </Route> ), { basename: "/foo" } );

reactjs react-router navigation react-router-dom

回答 1 投票 0

如何让React路由器加载程序等待axios实例初始化？

我有一个 axios 实例，需要配置它才能开始进行正常的 API 调用。我需要设置授权标头并放置 1 个拦截器，该拦截器将在每个 401 上刷新 JWT 令牌

reactjs axios react-router loader

回答 1 投票 0

React 与链接相关的路由器错误

我正在尝试将组件从一个路由到另一个，我收到与反应路由器链接相关的错误，反应路由器的错误是 - 无法编译我尝试使用反应路由...

reactjs react-router react-router-dom

回答 4 投票 0

ReactJS 多个用户角色的私有路由不起作用

我已经挣扎了一段时间，但仍然不知道如何让它发挥作用。我有一条私有路由，应该根据用户角色在客户端和管理员之间切换。问题：如果...