React Router 中如何配置嵌套路由？

推荐答案

在 React Router 中配置嵌套路由可以通过在父路由组件中使用 <Outlet> 组件来实现。以下是一个简单的示例：

// www.javascriptcn.com code example
import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="dashboard" element={<Dashboard />}>
            <Route path="profile" element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
        </Route>
      </Routes>
    </Router>
  );
}

function Layout() {
  return (
    <div>
      <h1>Layout</h1>
      <Outlet />
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Outlet />
    </div>
  );
}

function Profile() {
  return <h3>Profile</h3>;
}

function Settings() {
  return <h3>Settings</h3>;
}

在这个示例中，<Outlet> 组件用于在父路由组件中渲染子路由组件。<Route> 组件的嵌套结构定义了路由的层次关系。

本题详细解读

1. 嵌套路由的基本概念

嵌套路由是指在一个路由组件内部再定义其他路由组件。这种结构通常用于构建复杂的页面布局，其中某些部分的内容会根据 URL 的变化而动态加载。

2. <Outlet> 组件的作用

<Outlet> 是 React Router 提供的一个组件，用于在父路由组件中渲染子路由组件。当 URL 匹配到某个嵌套路由时，<Outlet> 会自动渲染对应的子路由组件。

3. 路由配置的层次结构

在 React Router 中，路由配置是通过 <Route> 组件的嵌套结构来定义的。每个 <Route> 组件可以包含一个 element 属性，用于指定该路由对应的组件。子路由组件可以通过嵌套的 <Route> 组件来定义。

4. 示例解析

• <Route path="/" element={<Layout />}>: 定义了一个根路由，对应的组件是 Layout。所有子路由都会在 Layout 组件中渲染。

• <Route index element={<Home />} />: 定义了一个默认路由，当 URL 为 / 时，会渲染 Home 组件。

• <Route path="dashboard" element={<Dashboard />}>: 定义了一个嵌套路由，对应的组件是 Dashboard。在 Dashboard 组件中，<Outlet> 会渲染子路由组件。

• <Route path="profile" element={<Profile />} />: 定义了一个子路由，当 URL 为 /dashboard/profile 时，会渲染 Profile 组件。

• <Route path="settings" element={<Settings />} />: 定义了一个子路由，当 URL 为 /dashboard/settings 时，会渲染 Settings 组件。

通过这种方式，React Router 可以轻松地实现复杂的嵌套路由结构。