React 公私有页面差异化菜单架构优化方案咨询

先提个小细节：你的Route标签属性写错啦，应该是component（单数）而不是components（复数），这个先纠正一下，不然路由没法正常工作~

下面给你几个实用的方案，你可以根据项目规模和需求来选：

方案一：基于路由路径的条件渲染（快速上手） #

这个方法最直接，通过判断当前路由的路径来决定显示哪个菜单。如果是类组件，需要用withRouter高阶组件把路由的location属性注入进来；如果是函数组件，直接用useLocation钩子就行。

类组件写法： #

import { withRouter, Switch, Route } from 'react-router-dom';

class App extends Component {
  render() {
    const { location } = this.props;
    // 判断当前路径是否属于私有页面
    const isPrivateRoute = location.pathname.startsWith('/private');
    
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            {/* 条件渲染对应菜单 */}
            {isPrivateRoute ? <MenuPrivate /> : <MenuPublic />}
            {/* 用Switch包裹路由，避免同时匹配多个路由 */}
            <Switch>
              <Route path='/private' component={Private} />
              <Route path='/private/account' component={PrivateAccount} />
              <Route path='/public' component={Public} />
              <Route path='/public/contact' component={PublicContact} />
            </Switch>
          </div>
        </Router>
      </Provider>
    )
  }
}

export default withRouter(App);

函数组件写法： #

import { useLocation, Switch, Route } from 'react-router-dom';

function App() {
  const location = useLocation();
  const isPrivateRoute = location.pathname.startsWith('/private');
  
  return (
    <Provider store={store}>
      <Router>
        <div className="App">
          {isPrivateRoute ? <MenuPrivate /> : <MenuPublic />}
          <Switch>
            <Route path='/private' component={Private} />
            <Route path='/private/account' component={PrivateAccount} />
            <Route path='/public' component={Public} />
            <Route path='/public/contact' component={PublicContact} />
          </Switch>
        </div>
      </Router>
    </Provider>
  );
}

优点：实现简单，不需要额外拆分组件，适合小型项目。
缺点：路由规则变多后，判断逻辑会越来越复杂，不够模块化。

方案二：创建布局组件（推荐中大型项目） #

把公共布局和私有布局拆成独立组件，每个布局包含对应的菜单和子路由出口，代码结构更清晰，扩展性更强。

第一步：编写布局组件 #

// PublicLayout.js（函数组件示例）
import { Outlet } from 'react-router-dom'; // 用Outlet渲染子路由内容

export default function PublicLayout() {
  return (
    <div>
      <MenuPublic />
      <Outlet /> {/* 这里会渲染匹配的子路由组件 */}
    </div>
  );
}

// PrivateLayout.js
import { Outlet } from 'react-router-dom';

export default function PrivateLayout() {
  return (
    <div>
      <MenuPrivate />
      <Outlet />
    </div>
  );
}

第二步：配置嵌套路由 #

// App.js（react-router v6版本）
import { Routes, Route } from 'react-router-dom';
import PublicLayout from './PublicLayout';
import PrivateLayout from './PrivateLayout';

function App() {
  return (
    <Provider store={store}>
      <Router>
        <div className="App">
          <Routes>
            {/* 公有页面组，统一使用PublicLayout */}
            <Route path='/public' element={<PublicLayout />}>
              <Route index element={<Public />} /> {/* /public 路径显示Public组件 */}
              <Route path='contact' element={<PublicContact />} /> {/* /public/contact */}
            </Route>
            {/* 私有页面组，统一使用PrivateLayout */}
            <Route path='/private' element={<PrivateLayout />}>
              <Route index element={<Private />} /> {/* /private */}
              <Route path='account' element={<PrivateAccount />} /> {/* /private/account */}
            </Route>
          </Routes>
        </div>
      </Router>
    </Provider>
  );
}

如果你的react-router是v5版本，写法略有不同：

// v5版本路由配置
<Switch>
  <Route path='/public' component={PublicLayout}>
    <Route path='/public' component={Public} />
    <Route path='/public/contact' component={PublicContact} />
  </Route>
  <Route path='/private' component={PrivateLayout}>
    <Route path='/private' component={Private} />
    <Route path='/private/account' component={PrivateAccount} />
  </Route>
</Switch>

此时布局组件需要用props.children来渲染子路由内容，而不是Outlet。

优点：代码模块化，布局与路由逻辑分离，新增页面或修改布局都很方便，适合中大型项目。
缺点：初期需要额外创建布局组件，但长远来看能大幅提升可维护性。

方案三：结合权限控制的菜单渲染（适合需要用户认证的场景） #

如果你的私有页面需要登录权限，可以把菜单渲染和权限拦截逻辑结合起来，既控制菜单显示，又防止未登录用户访问私有页面。

示例（函数组件）：

import { useLocation, Navigate, Routes, Route } from 'react-router-dom';

function App() {
  const location = useLocation();
  // 假设用localStorage里的token判断用户是否登录
  const isLoggedIn = localStorage.getItem('userToken') !== null;
  const isPrivateRoute = location.pathname.startsWith('/private');

  // 权限拦截：未登录访问私有页面，跳转到登录页
  if (isPrivateRoute && !isLoggedIn) {
    return <Navigate to='/login' replace />;
  }

  return (
    <Provider store={store}>
      <Router>
        <div className="App">
          {/* 根据登录状态和路由显示对应菜单 */}
          {isPrivateRoute && isLoggedIn ? <MenuPrivate /> : <MenuPublic />}
          <Routes>
            <Route path='/public' element={<Public />} />
            <Route path='/public/contact' element={<PublicContact />} />
            <Route path='/private' element={<Private />} />
            <Route path='/private/account' element={<PrivateAccount />} />
            <Route path='/login' element={<Login />} />
          </Routes>
        </div>
      </Router>
    </Provider>
  );
}

这个方案一举两得，既解决了菜单显示问题，又完成了私有页面的权限控制。

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