react-router-dom v6：如何实现路由嵌套但不嵌套组件渲染？

1. 嵌套路由是否必须在父组件内渲染嵌套组件？ #

在react-router-dom v6中，嵌套路由的子路由内容默认需要父路由组件渲染<Outlet />才能显示。如果父组件不渲染<Outlet />，子路由的内容不会被渲染，且父组件自身的内容会始终展示（也就是你之前遇到的情况）。但如果你的需求是路径嵌套但不需要父、子组件内容同时显示，完全没必要用嵌套路由结构，直接定义独立路由即可。

2. 实现路径/a/b仅显示ComponentB的解决方案 #

不需要修改现有ComponentView等组件结构，有两种简单实现方式：

方式一：直接定义独立的/a/b路由 #

在<Routes>中新增path="a/b"的路由，指向ComponentView title="b"，访问/a/b时只会渲染该路由对应的组件，不会和/a的内容叠加。

修改后的App.js代码：

import React from "react";
import { Route, Routes } from 'react-router-dom';
import './App.css';
import { Home } from "./components/Home"
import { ComponentView } from "./components/ComponentView";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="a" element={<ComponentView title="a" />} />
        <Route path="a/b" element={<ComponentView title="b" />} />
      </Routes>
    </div>
  );
}
export default App;

方式二：用嵌套路由语法但父路由仅渲染Outlet #

如果一定要用嵌套路由写法，可将父路由path="a"的element设为<Outlet />，把/a和/a/b作为子路由。这样父路由仅负责承载子路由渲染，不会显示自身内容，访问/a和/a/b时只会展示对应组件。

修改后的App.js代码：

import React from "react";
import { Route, Routes, Outlet } from 'react-router-dom';
import './App.css';
import { Home } from "./components/Home"
import { ComponentView } from "./components/ComponentView";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="a" element={<Outlet />}>
          {/* index路由对应/a路径 */}
          <Route index element={<ComponentView title="a" />} />
          {/* path="b"对应/a/b路径 */}
          <Route path="b" element={<ComponentView title="b" />} />
        </Route>
      </Routes>
    </div>
  );
}
export default App;

你之前尝试的问题原因 #

你之前的路由结构里，父路由path="a"的element是ComponentView title="a"，但这个组件内部没有渲染<Outlet />，导致子路由path="b"的内容无法显示，同时父路由的ComponentA会一直展示，所以访问/a/b时还是看到ComponentA的内容。

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