我是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文件夹,然后我创建了一个新的布局,看看:
在这个布局中我把,而不是全局布局中