面试题：React路由中嵌套路由的基本配置与渲染逻辑

Question

请描述在React路由（如react - router - dom）中，如何配置嵌套路由？假设我们有一个父路由'/parent'，在它之下有子路由'/parent/child1'和'/parent/child2'，请写出相关的路由配置代码，并解释其渲染逻辑。

Answer 1

路由配置代码

假设使用 react-router-dom v6，代码如下：

import { BrowserRouter as Router, Routes, Route } from'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/parent" element={<ParentComponent />}>
          <Route path="child1" element={<Child1Component />} />
          <Route path="child2" element={<Child2Component />} />
        </Route>
      </Routes>
    </Router>
  );
}

function ParentComponent() {
  return (
    <div>
      <h1>Parent Page</h1>
      {/* 子路由的出口 */}
      <Routes>
        <Route index element={<p>Default content for parent</p>} />
      </Routes>
    </div>
  );
}

function Child1Component() {
  return <h2>Child 1 Page</h2>;
}

function Child2Component() {
  return <h2>Child 2 Page</h2>;
}

export default App;

渲染逻辑解释

1. 父路由渲染：当 URL 为 /parent 时，ParentComponent 会被渲染。ParentComponent 中包含一个 <Routes> 组件，这里是子路由的出口。同时，ParentComponent 中的 <h1>Parent Page</h1> 会被展示。如果父路由有一个 index 子路由（这里 <Route index element={<p>Default content for parent</p>} />），当访问 /parent 时，这个 index 子路由的内容也会在父路由的出口处渲染。
2. 子路由渲染：当 URL 变为 /parent/child1 时，Child1Component 会在 ParentComponent 内的 <Routes> 出口处渲染。同理，当 URL 为 /parent/child2 时，Child2Component 会在 ParentComponent 内的 <Routes> 出口处渲染。这样就实现了嵌套路由的功能，父路由组件作为容器，子路由组件在其内部特定位置渲染。