React Router 5 如何为无头部侧边导航的特定页面配置路由

核心思路是通过嵌套路由+布局拆分的方式区分两类页面：不带公共导航的页面走公共布局，带头部和侧边栏的页面走受保护布局，同时可以内置登录鉴权逻辑。

1. 实现公共布局组件（无导航） #

所有不需要展示头部、侧边栏的页面都放在该布局下，比如登录页、学生详情页：

// src/layouts/PublicLayout.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Login from '../pages/Login';
import StudentDetail from '../pages/StudentDetail';

const PublicLayout = () => {
  return (
    <Switch>
      <Route exact path="/" component={Login} />
      <Route path="/detail" component={StudentDetail} />
    </Switch>
  )
}
export default PublicLayout;

2. 实现受保护布局组件（带导航） #

所有需要展示头部、侧边栏的页面都放在该布局下，同时内置登录鉴权逻辑，未登录用户自动跳转到登录页：

// src/layouts/ProtectedLayout.js
import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Header from '../components/Header'; // 你的头部组件
import Sidebar from '../components/Sidebar'; // 你的侧边栏组件
import StudentList from '../pages/StudentList';
import StudentInfo from '../pages/StudentInfo';

const ProtectedLayout = () => {
  // 替换为你项目实际的登录态判断逻辑
  const isLoggedIn = !!localStorage.getItem('user_token');
  if (!isLoggedIn) return <Redirect to="/" />

  return (
    <div className="protected-page-wrapper">
      <Header />
      <div style={{ display: 'flex' }}>
        <Sidebar />
        <div className="main-content">
          <Switch>
            <Route exact path="/students" component={StudentList} />
            <Route path="/student/:id" component={StudentInfo} />
            <Redirect to="/students" />
          </Switch>
        </div>
      </div>
    </div>
  )
}
export default ProtectedLayout;

3. 配置根路由 #

在项目入口的App.js中整合两套布局的路由：

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import PublicLayout from './layouts/PublicLayout';
import ProtectedLayout from './layouts/ProtectedLayout';

function App() {
  return (
    <Router>
      <Switch>
        {/* 匹配所有带导航的页面路径 */}
        <Route path={["/students", "/student/:id"]} component={ProtectedLayout} />
        {/* 其他路径走公共布局 */}
        <Route path="/" component={PublicLayout} />
      </Switch>
    </Router>
  )
}
export default App;

补充说明 #

• 学生详情页如果需要携带学生ID参数，可以将路由改为/detail/:studentId，跳转时调用history.push(/detail/${id})，在详情页通过props.match.params.studentId获取参数即可
• 路径匹配规则可以根据你的业务需求调整，需要精准匹配的路由记得加exact属性
• 布局样式可以根据UI要求自行调整，示例中仅给出基础结构

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