使用createBrowserRouter时嵌套路由无法渲染新页面的问题

点击About页面中的链接后，AboutDetails内容会在Home页面的<main>区域（Outlet）内展示，而非预期的独立新页面，希望点击链接后能单独渲染AboutDetails组件页面。

问题原因 #

当前路由结构中，AboutDetails是About的子路由，而About又是Home的子路由。React Router的嵌套路由机制会让所有子路由的内容渲染在父组件的<Outlet />中，所以导航到/about/:item时，Home的导航栏和布局会被保留，AboutDetails只是作为子内容展示。

解决方案 #

要实现独立页面渲染，需要调整路由结构，让AboutDetails不再嵌套在带有布局的父路由下。以下是两种可行方案：

方案一：将AboutDetails设为顶级路由 #

修改路由配置，把AboutDetails从嵌套层级中抽离，作为和Home同级的路由：

import React from 'react';
import { createBrowserRouter, RouterProvider  } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Skills from './Skills';
import Contact from './Contact';
import AboutDetails from './AboutDetails';

const router = createBrowserRouter([
  {
    path:'/',
    element: <Home />,
    children: [
      {
        path: 'about',
        element: <About />
      },
      {
        path: 'skills',
        element: <Skills />
      },
      {
        path: 'contact',
        element: <Contact />
      }
    ],
  },
  // 独立设置AboutDetails路由，不嵌套在Home下
  {
    path: '/about/:item',
    element: <AboutDetails />
  }
]);

function App() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default App;

这样点击链接后，会直接渲染AboutDetails组件，不会包含Home的导航栏和布局。

方案二：抽离导航组件，让独立页面共享布局 #

如果需要AboutDetails页面保留导航栏，可以把导航部分抽成单独组件，让Home和AboutDetails分别引入：

1. 创建Navbar.jsx组件：

import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <div style={{display: 'flex', justifyContent: 'space-evenly', textDecoration: 'none'}}>
      <Link to='/'>Home</Link>
      <Link to='about'>About</Link>
      <Link to='skills'>Skills</Link>
      <Link to='contact'>Contact</Link>
    </div>
  );
}

export default Navbar;

2. 修改Home.jsx：

import React from 'react';
import Navbar from './Navbar';
import { Outlet } from "react-router-dom";

function Home() {
  return (
    <>
      <Navbar />
      <main>
        <Outlet />
      </main>
    </>
  )
}

export default Home;

3. 修改AboutDetails.jsx：

import React from 'react';
import { useParams } from 'react-router-dom';
import Navbar from './Navbar';

function AboutDetails() {
  const { item } = useParams()

  return (
    <>
      <Navbar />
      <div>AboutDetails</div>
      <p>I've extracted {item}</p>
    </>
  )
}

export default AboutDetails;

路由配置使用方案一的结构即可，这样AboutDetails页面既保留导航栏，又是独立渲染的页面。

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