如何在React Router中为指定路由集成Mantine AppShell？

方案一：使用 React Router Outlet 嵌套路由（推荐） #

这种方式完全契合 React Router 的设计逻辑，代码结构清晰且扩展性强。核心思路是把需要 AppShell 布局的路由统一嵌套在父路由下，父路由负责渲染 AppShell 框架，子路由的内容通过 Outlet 自动填充到 AppShell 的主内容区域。

1. 创建 AppShell 布局组件

import { AppShell, Navbar, Header, Footer } from '@mantine/core';
import { Outlet } from 'react-router-dom';

export function AppShellLayout() {
  return (
    <AppShell
      navbar={<Navbar width={{ base: 250 }}>侧边栏菜单/内容</Navbar>}
      header={<Header height={60}>顶部导航栏</Header>}
      footer={<Footer height={40}>页面页脚</Footer>}
      padding="md"
    >
      {/* Outlet 会自动渲染当前匹配的子路由组件 */}
      <Outlet />
    </AppShell>
  );
}

2. 配置主路由
   将不需要 AppShell 的独立路由（如登录页）放在外层，需要布局的路由嵌套到 AppShellLayout 对应的父路由下：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AppShellLayout } from './AppShellLayout';
import Dashboard from './Dashboard';
import Settings from './Settings';
import Login from './Login';
import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <Routes>
        {/* 无需 AppShell 的独立路由 */}
        <Route path="/login" element={<Login />} />
        
        {/* 所有需要 AppShell 的路由都嵌套在此 */}
        <Route element={<AppShellLayout />}>
          <Route path="/" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
          {/* 新增路由直接在此添加即可 */}
        </Route>

        {/* 404 页面 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

方案二：在 AppShell 内部根据路由判断渲染组件 #

如果不想使用嵌套路由，也可以通过 useLocation 获取当前路径，手动判断并渲染对应组件。这种方式适合路由数量较少的场景。

1. 编写带路由判断的 AppShell 组件

import { AppShell, Navbar, Header, Footer } from '@mantine/core';
import { useLocation } from 'react-router-dom';
import Dashboard from './Dashboard';
import Settings from './Settings';

export function AppShellWithRouter() {
  const location = useLocation();

  const renderPageContent = () => {
    switch (location.pathname) {
      case '/':
        return <Dashboard />;
      case '/settings':
        return <Settings />;
      default:
        return <div>页面未找到</div>;
    }
  };

  return (
    <AppShell
      navbar={<Navbar width={{ base: 250 }}>侧边栏菜单</Navbar>}
      header={<Header height={60}>顶部导航</Header>}
      footer={<Footer height={40}>页脚</Footer>}
      padding="md"
    >
      {renderPageContent()}
    </AppShell>
  );
}

2. 配置路由
   将需要 AppShell 的路由直接指向该组件：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AppShellWithRouter } from './AppShellWithRouter';
import Login from './Login';
import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<AppShellWithRouter />} />
        <Route path="/settings" element={<AppShellWithRouter />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

两种方案对比 #

• 方案一（嵌套路由）：符合 React Router 最佳实践，新增路由只需添加子路由，无需修改 AppShell 组件，维护成本低，适合中大型项目。
• 方案二（手动判断）：代码直观，但路由增多时会导致 switch 分支臃肿，扩展性差，适合小型项目或路由极少的场景。

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