React Router v6问题：登录注册页未独立渲染，与Navbar同页显示

你的问题核心是路由结构设计不合理：原App组件中，<Navbar>、<Hero>、<Analytics>等组件与<Routes>同级，无论路由切换到/login还是/signup，这些组件都会持续渲染，导致登录/注册页面和它们同屏显示。

以下是具体的修复步骤：

1. 重构首页内容为独立组件 #

先把原App中属于首页的内容（Hero、Analytics、Cards、Footer）抽成单独的Home组件：

// Home.jsx
export default function Home() {
  return (
    <>
      <Hero />
      <Analytics />
      <Cards />
      <Footer />
    </>
  );
}

2. 用布局路由区分带/不带Navbar的页面 #

使用React Router v6的<Outlet>组件实现布局拆分，把需要显示Navbar的页面（比如首页）放在公共布局里，登录/注册页面单独作为顶级路由：

// App.js
import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';
import Home from './Home';
import Login from './Login';
import Signup from './Signup';
import Navbar from './Navbar';

// 带Navbar的公共布局组件
function PublicLayout() {
  return (
    <>
      <Navbar />
      <Outlet /> {/* 这里渲染子路由的内容（比如Home） */}
    </>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        {/* 带Navbar的路由组 */}
        <Route element={<PublicLayout />}>
          <Route path="/" element={<Home />} />
          {/* 其他需要Navbar的页面都可以放在这个路由组下 */}
        </Route>

        {/* 不带Navbar的登录/注册路由 */}
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </Router>
  );
}

3. 修复Navbar的Home链接 #

把Navbar中Home选项的跳转路径改为根路径：

// Navbar.jsx
<li className='p-4'>
  <Link to="/">Home</Link>
</li>

效果说明 #

• 访问/时：会渲染<Navbar> + <Home>的内容（即原首页效果）
• 访问/login或/signup时：只会渲染对应的登录/注册组件，Navbar和首页内容不会显示

内容的提问来源于stack exchange，提问作者jessiepinkman