嵌套路由不会使用 createBrowserRouter 渲染新页面

Question

我无法将内容呈现到新页面，而是呈现到与其父页面相同的页面，而不是使用动态 URL 和 createBrowserRouter 时显示为新页面的预期结果。有人可以帮忙吗？期望的结果是，在“关于”页面上，用户单击其中一个链接，然后使用 aboutdetails 组件呈现一个单独的页面。

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 />,
        children: [
          {
            path: ':item',
            element: <AboutDetails />
          }
        ]
      },
      {
        path: 'skills',
        element: <Skills />
      },
      {
        path: 'contact',
        element: <Contact />
      }
    ],
  
  },

],
 
);

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

export default App;

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

function Home() {
  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>

    <main>
        <Outlet />
    </main>
    </>
   
  )
}

export default Home

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

function About() {

  const listStuff = {
    links: ['prev-page', 'next-page', 'fast-fwd-page', 'fast-rwd-page']
  }
  return (
    <div>
      <h2>About</h2>
      <p>Damn it's about to go down!</p>
      <ul>
     {listStuff.links.map((item, idx) => (
      <li key={idx}>
        <Link to={`/about/${item}`}>{item}</Link>
        </li>
     ))}
     </ul>
   
    </div>
  );
}

export default About;


import React from 'react';
import { useParams, Outlet } from 'react-router-dom';



function AboutDetails() {

    const { item } = useParams()


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

  )
}

export default AboutDetails

Answer 1

如果您不希望“关于”详细信息在“关于”页面内容下的同一页面上呈现，那么您将需要取消这些路由的嵌套，以便它们独立呈现。换句话说，

About

和

AboutDetails

应该在同级路线上渲染。

示例：

const router = createBrowserRouter([
  {
    path:'/',
    element: <Home />,
    children: [
      {
        path: 'about',
        element: <About />
      },
      {
        path: 'about/:item',
        element: <AboutDetails />
      },
      {
        path: 'skills',
        element: <Skills />
      },
      {
        path: 'contact',
        element: <Contact />
      }
    ],
  },
]);

const router = createBrowserRouter([
  {
    path:'/',
    element: <Home />,
    children: [
      {
        path: 'about',
        children: [
          {
            index: true,
            element: <About />
          },
          {
            path: ':item',
            element: <AboutDetails />
          }
        ]
      },
      {
        path: 'skills',
        element: <Skills />
      },
      {
        path: 'contact',
        element: <Contact />
      }
    ],
  },
]);