react-router 相关问题

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

反应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”。

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

为什么我的 home.js 在浏览器中没有显示任何内容?

我正在参加全栈 Web 开发课程,目前正在一边学习 React,一边为一个作品集构建一个项目,希望能够进入前端 Web 开发人员的职位。 发现...

回答 1 投票 0

仅在部署到 Azure Web 应用程序后出现 React JS 应用程序路由问题

我有一个 React JS 应用程序,带有 React Router。在开发过程中,npm start,我没有遇到任何问题。我像往常一样访问以下位置。 http://本地主机:3000 由于路由代码,它变成 嗯……

回答 3 投票 0

反应路由器页面而不是路由

我正在使用最新的react-router版本6,我正在使用createbrowserouter使用createroutesFromElements来路由和链接我的页面以创建单页投资组合网站,但是当我单击nav-li时...

回答 1 投票 0

我的 Navlink 活动类在 React-router-v6 中出现问题

我使用React-router-v6创建了一个导航栏。 当我们点击任何 li 元素时,.active 类将会出现 现在我设置了活动类的样式(例如添加背景颜色和颜色),但是当我单击...

回答 1 投票 0

使用react-router-dom v6.0.2检测用户离开页面

我试图在导航到 ReactJS Web 应用程序中的其他路线或页面之前显示未保存更改的对话框。我尝试了 Stackoverflow 的不同解决方案,但没有成功。大部分解决方案

回答 3 投票 0

为什么我的 navbar.css 没有显示在本地主机页面中?

我参加了全栈 Web 开发课程,目前正在一边学习 React,一边为我的作品集构建一个项目,希望能够进入前端 Web 开发人员的职位。 找到了...

回答 1 投票 0

在 iOS 上加载新内容时以编程方式设置焦点

我正在尝试设置自动聚焦于第一个加载的文章。 (例如,用户单击“加载更多”按钮并加载新文章)。 我的反应实现: 我在 <

回答 1 投票 0

根据显示的页面更新标题标题(同级组件)

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]);

回答 2 投票 0

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

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

回答 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" } );

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 4 投票 0

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

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

回答 1 投票 0

react vite 模块不工作我已经导入了 10 次但不工作

react vite 模块不起作用我已经导入了 10 次但不起作用...今天我开始了 React router 但这些导入非常困难或者是由于 vite 错误的屏幕截图 我也试过了...

回答 1 投票 0

如何像v5中那样使用react-router useNavigate来替换params?

在我当前使用react-router v5的应用程序中,我们有一个来自电子邮件的重定向链接,其中包含referrer=email参数,我们用它来确定登录/注册页面上的某些初始状态: 常量

回答 2 投票 0

未在事件监听器中获取更新的路径名值

我正在为效果添加一个滚动事件侦听器,这样当到达某一部分时,url 就会更改为不同的部分。 React.useEffect(() => { window.addEventListener('滚动',

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.