react-router 相关问题

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

为什么反应路由器导航（-1）可能会返回两个路由/页面？

我有一个页面，如果用户没有查看权限，则需要将用户踢回到上一个页面。我制作了这个非常简单的组件作为测试，但我发现它向后导航了两页...

reactjs react-router navigation

回答 1 投票 0

为什么这个反应登录页面不起作用？

我正在尝试制作一个反应应用程序，我想进行一些登录，然后可以访问主站点。问题是它根本没有真正发挥作用。首次登录时使用正确的密码...

reactjs typescript next.js deployment react-router

回答 1 投票 0

React Router 的 Outlet 追加到根 div 中

这是路线 AnimatePresence 来自 Frame-Motion 这是路线 AnimatePresence 来自 Frame-Motion <AnimatePresence> <Routes location={location} key={location.pathname}> <Route path="Auth" element={<PageLayout />} > <Route path="action-dashboard" element={<ActionDashboard />} /> <Route path="Buget-Revenue-Risk" element={<RiskPage />} /> <Route path="Revenue-Risk" element={<RiskPage />} /> <Route path="Dashboard" element={<Dashboard />} /> <Route path="Add-Update-Phase" element={<AddUpdatePhasePage />} /> <Route path="Add-Update-Project" element={<Add\_updateProjectPage />} /> <Route path="Create-CTC" element={<CreateCTC />} /> <Route path="Create-CTC-From-Risk" element={<CreateCTC />} /> <Route path="CTC-Review" element={<CTCReview />} /> <Route path="CTC-Details" element={<CTCDetails />} /> <Route path="Project-Snapshot" element={<ProjectSnapshot />} /> <Route path="Zonal-Dashboard" element={<ZonalDashboard />} /> <Route path="Risk-Discovery" element={<RiskDiscovery />} /> <Route path="Cost-dashboard" element={<CostDashboard />} /> <Route path="price-dashboard" element={<PriceDashboard />} /> <Route path="phase-master" element={<PhaseMaster />} /> </Route> <Route index path="\*" element={<AuthorizationPage />} /> </Routes> </AnimatePresence> 问题：- 在 ActionDashboard（登陆页面）组件上，有到其他组件的 NavLink，以卡片的形式，在用户导航到任何一个组件后，用户可以使用菜单也导航到 ActionDashboard，现在第一次从登陆页面导航到其他页面工作完美，但用户再次访问登陆页面并第二次导航到任何页面登陆页面不会被卸载。发生的情况是 Outlet 正在根 div 标签中追加，并且当用户使用菜单导航时不会出现问题页面布局组件第一次使用 DOM DOM 第二次我尝试将 ActionDashboard 放在不同的组中不起作用为什么布局组件附加在根 div 中问题解决了原因：通过错误链接导航到操作仪表板是相对路径而不是绝对路径，因此出现问题

javascript reactjs react-router

回答 1 投票 0

Typescript 页面路由在单击时不会呈现子页面（React Router v6）

我仍在学习 Typescript，所以如果这看起来很简单，请道歉。我的登陆页面上有一个应用程序 (App.tsx)。输入您的电子邮件并单击“让我们开始吧”后

reactjs typescript react-hooks react-router

回答 1 投票 0

是否可以为带查询参数和不带查询参数的路径使用不同的加载器，或者在 React Router 6 中添加它们时有条件地跳过加载器？

我有一个路径 /items 加载器，它从 API 获取大量数据，所以我使用延迟加载器。我想仅在没有搜索时有条件地渲染代码...

reactjs react-router react-router-dom

回答 1 投票 0

创建 React App Build 后的空白页面放置在服务器上

前注：以下帖子中的解决方案对我不起作用：在 create-react-app 上运行构建后出现空白页面就我而言，App.js 主要功能：函数应用程序（）{ 返回（上一篇注释：以下帖子中的解决方案对我不起作用：在 create-react-app 上运行构建后出现空白页面就我而言，App.js 主要功能： function App() { return ( <div className='App'> <Routes> <Route index path='/' element={<Login />} /> <Route path='/home' element={<ProtectedRoute children={Home} />} /> </Routes> </div> ) } 和index.js： root.render( <div className="flex justify-center bg-black overscroll-contain"> <div className="w-full max-w-[70rem]"> <Auth0Provider domain={domain} clientId={clientId} authorizationParams={{ redirect_uri: window.location.origin, }}> <BrowserRouter> <App /> </BrowserRouter> </Auth0Provider> </div> </div> ); 构建被放置在子目录中。我使用与此类似的网址访问它：https://test.myweb.com/MyApp。我已经尝试了 package.json 上的建议配置："homepage": "."和"homepage": "https://test.myweb.com/MyApp"，但没有一个对我有用。同时，我一直在尝试制作一个工作的.htaccess，如下所示，但没有成功： RewriteEngine on #for app in subdirectory RewriteBase /test/testingProjects/MyApp Header set Cache-Control "no-cache" RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule ^.*/test/testingProjects/MyApp.* /test/testingProjects/MyApp/index.html [L] #for root app RewriteBase / Header set Cache-Control "no-cache" RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . /index.html [L] # DISABLE CACHING <IfModule mod_headers.c> Header set Cache-Control "no-cache, no-store, must-revalidate" Header set Pragma "no-cache" Header set Expires 0 </IfModule> <FilesMatch "\.(html|js)$"> <IfModule mod_expires.c> ExpiresActive Off </IfModule> <IfModule mod_headers.c> FileETag None Header unset ETag Header unset Pragma Header unset Cache-Control Header unset Last-Modified Header set Pragma "no-cache" Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT" </IfModule> </FilesMatch> 此时，我有不同的设置来检查，但我不确定如何设置或设置什么： BrowserRouter正确使用。 package.json 上的属性'homepage' .htaccess 文件。值得一提的是，登录是使用 Auth0 构建的，以防这种情况需要特殊配置。构建被放置在子目录中。我使用访问它与此类似的网址："https://test.myweb.com/MyApp". React-Router-DOM 路由器组件假设它在 "/" 处渲染，并将所有路由和链接视为相对于 this 路径。如果您从子目录托管应用程序，那么您需要通过 basename 属性告诉路由器此信息。 basename 将您的应用程序配置为在特定基本名称下运行网址如果您从服务器上的 "/MyApp" 子目录部署/托管应用程序，请将其作为路由器的 basename 属性传递。 root.render( <div className="flex justify-center bg-black overscroll-contain"> <div className="w-full max-w-[70rem]"> <Auth0Provider domain={domain} clientId={clientId} authorizationParams={{ redirect_uri: window.location.origin, }}> <BrowserRouter basename="/MyApp"> <App /> </BrowserRouter> </Auth0Provider> </div> </div> ); function App() { return ( <div className='App'> <Routes> <Route path='/' // <-- renders as "/MyApp/" element={<Login />} /> <Route path='/home' // <-- renders at "/MyApp/home" element={<ProtectedRoute children={Home} />} /> </Routes> </div> ); }

reactjs .htaccess react-router

回答 1 投票 0

如何使用 React Material UI 选项卡在同一页面上突出显示主导航菜单项和子导航菜单项并获取活动状态

在我的 React 组件中，我使用 Material UI 选项卡为主导航创建主菜单，并使用 React 路由器链接而不是显示选项卡内容：在我的 React <Header> 组件中，我使用 Material UI Tabs 为主导航创建一个 primary 菜单，并使用 React 路由器链接而不是显示选项卡内容： <Tabs value={location.pathname}> {(items || []).map((item) => ( <Tab key={item.url} label={item.title} value={item.url} href={item.url} disableRipple /> ))} </Tabs> 在同一页面上，我再次使用 Material UI 选项卡作为辅助菜单。主导航菜单项的路线路径是：/example-path。当我导航到此路线时，此菜单项会突出显示并处于活动状态。当辅助菜单项的选项卡与突出显示的主菜单项/example-path具有相同的路线时，两个菜单项都会突出显示并处于活动状态。当我单击另一个辅助菜单项时，只有这个辅助菜单项会突出显示/example-path/tab-two。如何管理同时突出显示主导航中的父项和二级菜单中的各种菜单项？ Header组件应该只匹配根路径段，而Submenu组件可以比较完整的URLpathname。请注意，如果您还有更多子路线，那么 Submenu 需要检查前两段。它应该渲染一个 Tab 组件，而不是渲染原始锚标记 <a> 组件。这样路由器就可以响应并处理导航操作，而不是让浏览器向服务器发出页面请求并重新加载整个应用程序。标题 Link 子菜单 import { Tabs, Tab } from "@material-ui/core"; import { Link, useLocation } from "react-router-dom"; const Header = () => { const { pathname } = useLocation(); const base = `/${pathname.slice(1).split("/").shift()}`; return ( <Tabs value={base}> <Tab component={Link} to="/" label="Home" key="/" value="/" /> <Tab component={Link} to="/about" label="About" key="/about" value="/about" /> <Tab component={Link} to="/dashboard" label="Dashboard" key="/dashboard" value="/dashboard" /> </Tabs> ); }; export default Header; 应用程序按照路径特异性的 inverse 顺序对 import { Tabs, Tab } from "@material-ui/core"; import { Link, useLocation } from "react-router-dom"; const Submenu = () => { const { pathname } = useLocation(); return ( <Tabs value={pathname}> <Tab component={Link} to="/about/about-one" label="About sub one" key="1" value="/about/about-one" /> <Tab component={Link} to="/about/about-two" label="About sub two" key="2" value="/about/about-two" /> </Tabs> ); }; export default Submenu; 内的路由进行排序，以便在回退到 less 特定路径之前匹配 more 特定路径。 Switch 更新以处理根 <Router> <Layout> <Switch> <Route path="/about/about-one"> <AboutOne /> </Route> <Route path="/about/about-two"> <AboutTwo /> </Route> <Route path="/about"> <About /> </Route> <Route path="/dashboard"> <Dashboard /> </Route> <Route path="/"> <Home /> </Route> </Switch> </Layout> </Router> 路线上的子菜单选项卡。为此，您需要做一些“黑客”操作来检查 URL 路径不是其他主要根路由之一，这样您就可以将基本 "/" 值覆盖为完全使用 Tabs 实用函数，"/" 代替 "/home-section/*" 子路线之一。示例：matchPath

reactjs material-ui react-router navigation

回答 1 投票 0

尝试在 app.js 中创建多个页面时，我不断遇到此错误 - 该怎么办？

我正在尝试制作一个作品集网站（使用Reactcodesandbox），其中包含多个谈论我的页面，并且我在React中遇到了一条错误消息，指出“元素类型无效”

react-router jsx

回答 1 投票 0

使用 React 创建多页面组件

我的问题不是关于react-router，我向一个API发出了请求，并且它的数据非常巨大，仅在一个页面中，所以我需要一种方法来自动生成更多页面来保存数据。 ..

reactjs rest react-router

回答 1 投票 0

Vite.js React Build 未在 Netlify 和 Vercel 上重定向

我用 vite.js 做了一个 React 构建。在本地主机上进行生产和测试时，一切正常。但是当我部署到 Netlify 或 vercel 时，我用 React-router 创建的路由就不是

reactjs react-router netlify vercel vite

回答 3 投票 0

来自 api 的数据未反映何时将数据传递给 setState

我向 api 发出了请求，当我控制台记录数据时，它显示了 data ，但 setItemsList(data) 设置为空。在组件中，未收到 itemsList 值。我搜索了...

reactjs react-hooks react-router react-custom-hooks

回答 1 投票 0

直接访问URL（在我的例子中是本地主机）时如何在不使用按钮的情况下弹出登录屏幕（Azure AD）？

我创建了一个基本的 React 应用程序，在其中实现了路由的概念，并使用 Azure AD 进行身份验证。当我尝试使用登录按钮登录时，它工作正常......

reactjs azure authentication react-router azure-active-directory

回答 2 投票 0

React Router 为 404 页面添加不同的布局

这是组件：函数应用程序（）{ 常量主 = () => { 返回（ ... 这是组件： function App() { const Main = () => { return ( <section className="app_section"> <div className="navbar_container"> <Navbar /> </div> <div className="pages_container"> <Routes> <Route path="/" element={<HomePage />} /> <Route path="dashboard" element={<DashboardPage />} /> <Route path="about" element={<AboutPage />} /> <Route path="terms" element={<TermsPage />} /> <Route path="privacy" element={<PrivacyPage />} /> <Route path="api" element={<Api />} /> </Routes> </div> </section> ); }; const NotFound = () => { return <p>404</p>; }; return ( <div className="App"> <Routes> <Route path="login" element={<Login />} /> <Route path="/*" element={<Main />} /> </Routes> </div> ); } 如何为 404 Not Found 页面的路由器添加第三个布局我尝试这样做： <Routes> <Route path="login" element={<Login />} /> <Route path="/*" element={<Main />} /> <Route path="*" element={<NotFound />} /> </Routes> 但由于"/*"点击了所有链接而无法正常工作，我该如何缓解这种情况？我建议创建一个 MainLayout 包装组件，其中包含您想要的布局容器组件，并为子路由呈现 Outlet。在 NotFound outside 路线上渲染 Route。MainLayout ... const MainLayout = () => ( <section className="app_section"> <div className="navbar_container"> <Navbar /> </div> <div className="pages_container"> <Outlet /> </div> </section> ); ... const Main = () => { return ( <Routes> <Route path="/" element={<MainLayout />}> <Route index element={<HomePage />} /> <Route path="dashboard" element={<DashboardPage />} /> <Route path="about" element={<AboutPage />} /> <Route path="terms" element={<TermsPage />} /> <Route path="privacy" element={<PrivacyPage />} /> <Route path="api" element={<Api />} /> </Route> <Route path="*" element={<NotFound />} /> </Routes> ); }; 创建 React.lazy 路由时遇到问题。它仅在刷新页面后加载。你知道如何解决吗？我也在 CodeSanbdox 中尝试过测试，但是如果我正在执行一些不同的路线，例如 404 和其他路线，React 会写出错误。 function App() { return ( <div className="App"> <Routes> <Route path="login" element={<Login />} /> <Route path="/*" element={<Main />} /> </Routes> </div> ); } 在CodeSandbox中编辑

reactjs react-router react-router-dom

回答 2 投票 0

React svg / png 渲染在新 URL 上闪烁

我正在使用最新的 create-react-app 配置，并在不同路由之间切换时面临问题。我的所有 SVG 都包含在 sprite 文件中。从逻辑上讲，sprite.svg 文件应该缓存在...

reactjs react-router

回答 3 投票 0

如何使用 React-Router 从一条路线转到另一条路线？

我有以下代码。它存在于具有路由“login”的文件中。从 root 开始，我有另一条路线“create-account”。每当我在登录中单击这个“a”元素时...

javascript html reactjs react-hooks react-router

回答 2 投票 0

useParam 在 React router Dom v6 中不起作用？

我试图将参数传递给我的另一个组件，即productDetail组件，但是当我尝试使用useParam访问该参数值时，它似乎不起作用：应用程序：导入反应...