React新手教程：创建无侧边栏默认入口页并通过Router实现跳转至带侧边栏页面

嘿，作为React新手，这个需求其实很好实现，咱们一步步来搞定它！核心思路是把无导航的入口页和带侧边栏的功能页面分成两个独立的路由分支，这样就能完全隔离它们的布局了。

具体步骤： #

• 创建默认入口页面：这个页面只放跳转按钮，没有任何侧边栏或导航。
• 调整路由结构：把根路径/指向入口页，然后新增一个路由（比如/dashboard）来承载带侧边栏的Home/About页面。
• 添加跳转逻辑：在入口页的按钮上设置跳转，点击后进入带侧边栏的路由页面。

修改后的完整代码： #

import React from 'react';
import './style.css';
import { BrowserRouter as Router, Route, Link, Routes, useNavigate } from 'react-router-dom';

// 侧边栏导航组件
const Nav = () => (
  <div>
    <ul>
      <li>
        <Link to="/dashboard">Home</Link>
      </li>
      <li>
        <Link to="/dashboard/about">About</Link>
      </li>
    </ul>
  </div>
);

// Home页面
const HomePage = () => <h1>Home Page</h1>;
// About页面
const AboutPage = () => <h1>About Page</h1>;

// 带侧边栏的容器页面：承载Nav和子路由
const Dashboard = () => (
  <div>
    <Nav />
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  </div>
);

// 默认入口页面：无导航，只有跳转按钮
const LandingPage = () => {
  const navigate = useNavigate();
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>欢迎来到我的应用</h1>
      <button onClick={() => navigate('/dashboard')}>进入应用</button>
    </div>
  );
};

export default function App() {
  return (
    <Router>
      <Routes>
        {/* 根路径指向默认入口页 */}
        <Route path="/" element={<LandingPage />} />
        {/* 带侧边栏的应用页面，包含子路由 */}
        <Route path="/dashboard/*" element={<Dashboard />} />
      </Routes>
    </Router>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

代码说明： #

• LandingPage：这就是你要的默认入口页，没有任何侧边栏，点击按钮通过useNavigate钩子跳转到/dashboard页面。如果你更喜欢用链接样式的跳转，也可以把按钮换成<Link to="/dashboard">进入应用</Link>，再通过CSS调整成按钮样式。
• Dashboard：这个组件是带侧边栏的容器，里面包含Nav组件和Home/About的子路由。路由路径用了/dashboard/*，是为了匹配它下面的所有子路由（比如/dashboard/about）。
• 路由结构调整：根路径/现在指向入口页，而原来的Home/About页面变成了/dashboard下的子页面，这样就完全隔离了入口页和带导航的页面，满足你“默认主页面不得包含任何侧边栏或路由导航”的要求。

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