我是reactjs的新手，无法解决这个问题。当我点击登录按钮时，它会转到主页，但导航栏和侧边栏会留在登录页面。怎么解决这个问题？如果不把导航栏和侧边栏放在其他组件中，我就不能处理这个问题吗？App.jsLogin Page
yh2wf1be1#
我终于解决了。我将解释代码的每一部分。首先，从react导入useState和useEffect
react
useState
useEffect
import { useState, useEffect } from 'react'
现在，我们需要知道网页的当前路径。为此，我们使用useState来设置当前路径。在函数App()中，我们初始化currPath并将其初始值设置为当前路径。
App()
currPath
const [currPath, setCurrPath] = useState(window.location.pathname)
根据useEffect()的行为，每当页面的元素被修改时都会调用它。每当我们转到具有不同路径的页面时，换句话说，当页面的元素被修改时，我们使用它来获取当前路径。
useEffect()
useEffect(() => { setCurrPath(window.location.pathname) }, [])
现在，每次我们转到不同的页面，currPath都会更新。因为我们只想在path * 不是 * /时显示导航栏和侧边栏，即而不是登录路径，我们将其写成：
path
/
{currPath !== '/' && <><SidebarNav /><Navbar /></>}
上面的代码片段位于<BrowserRouter>标签的正下方。
<BrowserRouter>
**注意：**多个JSX元素必须 Package 在一个封闭标记中，因此<SidebarNav />和<Navbar />都 Package 在<>和</>中。
<SidebarNav />
<Navbar />
<>
</>
tjvv9vkg2#
首先，在登录页面中使用根路径“/”不是一个好的做法。你可以更新你的App.js如下：
<Routes> <Route path="/" element={<AppLayout links={linksDetails} />}> <Route index element={<HomeDashboard />} /> <Route path="shop" element={<ShopDashboard />} /> <Route path="login" element={ <LoginDashboard /> } /> <Route path="user-settings" element={ <ProtectedRoute> <UserSettingsDashboard /> </ProtectedRoute> } /> <Route path="*" element={<NotFoundDashboard />} /> </Route> </Routes>
之后，在AppLayout组件（包含Sidebar和Navbar）中，您可以使用以下内容：
import { useLocation } from "react-router-dom"; const AppLayout = () => { const { pathname } = useLocation(); const isLoginPage = useMemo(()=> pathname.includes('login'), [pathname]); ... {!isLoginPage && <Navbar />}
如果您想使用您在问题中使用的相同路线，则条件如下：
const { pathname } = useLocation(); const isLoginPage = useMemo(()=> pathname === "/", [pathname]); ... {!isLoginPage && <Navbar />} ... {!isLoginPage && <Sidebar />}
eaf3rand3#
我只是在接下来的13年里遇到了同样的问题。在我的例子中，我创建了一个全局布局，看起来像这样：
<html lang="en"> <body className={inter.className}> <AuthProvider> <div> {children} </div> </AuthProvider> </body> </html>
然后，我照顾了一个文件夹，并命名它（文件夹），你可以命名它whethever你想要的。我把我的 Jmeter 板dashbord文件夹，然后我创建了一个新的布局，看看：
<div className="flex"> <SideBar /> <div className={`w-[calc(100%-250px)] bg-[color:#EDF0F8] p-8`}> {children} </div> </div>
在这个布局中我把，而不是全局布局中
3条答案
按热度按时间yh2wf1be1#
我终于解决了。我将解释代码的每一部分。
首先，从
react导入useState和useEffect现在，我们需要知道网页的当前路径。为此，我们使用
useState来设置当前路径。在函数
App()中，我们初始化currPath并将其初始值设置为当前路径。根据
useEffect()的行为，每当页面的元素被修改时都会调用它。每当我们转到具有不同路径的页面时，换句话说，当页面的元素被修改时，我们使用它来获取当前路径。现在，每次我们转到不同的页面，
currPath都会更新。因为我们只想在path* 不是 */时显示导航栏和侧边栏，即而不是登录路径，我们将其写成：上面的代码片段位于
<BrowserRouter>标签的正下方。**注意：**多个JSX元素必须 Package 在一个封闭标记中，因此
<SidebarNav />和<Navbar />都 Package 在<>和</>中。tjvv9vkg2#
首先，在登录页面中使用根路径“/”不是一个好的做法。你可以更新你的App.js如下：
之后，在AppLayout组件（包含Sidebar和Navbar）中，您可以使用以下内容：
如果您想使用您在问题中使用的相同路线，则条件如下：
eaf3rand3#
我只是在接下来的13年里遇到了同样的问题。
在我的例子中，我创建了一个全局布局，看起来像这样：
然后，我照顾了一个文件夹，并命名它（文件夹），你可以命名它whethever你想要的。我把我的 Jmeter 板dashbord文件夹，然后我创建了一个新的布局，看看：
在这个布局中我把，而不是全局布局中