如何将子路由组件路由至新页面而非父页面内显示？

你当前的问题是把/hello配置成了/gpa的子路由，React Router会默认将子路由组件渲染在父路由组件的<Outlet />中（如果父组件有使用Outlet的话），所以Hello会在Gpa页面内部显示。要让Hello在新页面独立显示，需要调整路由结构：

方案1：将/hello设为顶级路由 #

把/hello路由从/gpa的子路由中移出，和/gpa同级，这样访问/hello时会直接替换整个页面内容：

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<Homepage />} />
      <Route path="/about" element={<About />} />
      <Route path="/gpa" element={<Gpa />} />
      <Route path="/hello" element={<Hello />} />
      <Route path="/cgpa" element={<Cgpa />} />
    </>
  )
);

return <RouterProvider router={router} />;

方案2：保留/gpa/hello路径但设为独立路由 #

如果需要使用/gpa/hello这种嵌套路径，但仍要让Hello独立显示，不要将其作为/gpa的子路由，直接配置为顶级路由：

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<Homepage />} />
      <Route path="/about" element={<About />} />
      <Route path="/gpa" element={<Gpa />} />
      <Route path="/gpa/hello" element={<Hello />} />
      <Route path="/cgpa" element={<Cgpa />} />
    </>
  )
);

return <RouterProvider router={router} />;

跳转方式调整 #

在Gpa组件中使用Link组件跳转时，对应修改to属性的值：

// Gpa.jsx
import { Link } from 'react-router-dom';

function Gpa() {
  return (
    <div>
      {/* 对应方案1的跳转 */}
      <Link to="/hello">前往Hello页面</Link>
      {/* 对应方案2的跳转 */}
      <Link to="/gpa/hello">前往Hello页面</Link>
    </div>
  );
}

注意：原代码中createRoutesFromElements直接包裹多个<Route>会存在JSX语法错误，需要用<>或<React.Fragment>作为根容器包裹所有路由配置。

内容的提问来源于stack exchange，提问作者Yusuf Ridwan Ayomide