Javascript 不在ReactionRouterDOM中显示特定路由的组件

我在我的React应用程序中使用React-Router-DOM v6.19.0.我在Root.jsx中为路由设置了Layout:

function Root() {
    return (
        <>
            <Header />
            <Outlet />
            <Footer />
        </>
    )
}

export default Root

这在我在Main.jsx的主要路由中显示:

const router = createBrowserRouter(
    createRoutesFromElements(
        <Route path='/' element={<Root />}>
          <Route path='' element={<Home />}/>
          <Route path='about' element={<About />}/>
          <Route path='pinboard' element={<Todos />}/>
          <Route path='lists' element={<Lists />}/>
        </Route>
    )
)

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
)

正如您所看到的，页眉和页脚在每条路由中呈现，只有Outlet发生了变化.

问题是，我不想显示特定路由上的页眉和页脚(如注册页面).

我怎样才能做到这一点呢？

我试着做了一次状况判断:

const location = useLocation();

const DontRenderHeaderFooter = ['/login', '/signup'];
const renderHeaderFooter = !DontRenderHeaderFooter.includes(location.pathname);

return (
    <>
        {renderHeaderFooter && <Header />}
        <Outlet />
        {renderHeaderFooter && <Header />}
    </>
)

但这似乎不起作用.