Bu gibi durumlar için Layout sistemini kullanın.

// main layout
import { Outlet } from 'react-router-dom';
import Header from '~/components/Header'
import Footer from '~/components/Footer'

const Layout = () => {
    return (
        <>
            <Header />
            <main>
                <Outlet />
            </main>
            <Footer />
        </>
    )
}

export default Layout

// auth layout
import { Outlet, Navigate } from 'react-router-dom';

const AuthLayout = () => {
    // kullanıcı oturum açmışsa,
    const isAuth = true;
    if(!isAuth) return <Navigate to="/" />
    return (
        <div class="auth">
            <Outlet />
        </div>
    )
}

export default AuthLayout

// React Router örnek kullanım:
// ...
// useRoutes için kullanım
const routes = [
    {
        path: '/',
        element: Layout, // nested route oluşturduk ve artık bu element içindeki elemanların parenti olacak.
        children: [
            {
                index: true,
                element: Home
            }
        ]
    },
    {
        path: '/auth',
        element: AuthLayout, // layout
        children: [
            {
                path: 'login',
                element: Login
            },
            {
                path: 'signup',
                element: Signup
            }
        ]
    }
]

return useRoutes(routes)

// jsx içinde kullanım

return (
    <Routes>
        <Route path="/" element={<Layout />} > {/* burada da aynı şekilde nested route oluşturduk ve artık bu element içindeki elemanların parenti olacak. */}
            <Route index={true} element={<Home />} />
        </Route>
        <Route path="/auth" element={<AuthLayout />}>
            <Route path="login" element={<Login />} />
            <Route path="signup" element={<Signup />} />
        </Route>
    </Routes>
)

İnşallah yardımcı olmuştur. Bir hata olursa yazabilirsin, detaylı kullanımlar için React Router'ın dokümanına göz atabilirsin.