react如何直接打开二级子页面

在React中直接打开二级子页面

使用react-router-dom的嵌套路由功能可以实现直接打开二级子页面。确保已安装最新版本的react-router-dom（v6及以上）。

配置嵌套路由结构

在根路由文件中定义父路由和子路由的嵌套关系：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/parent',
    element: <ParentLayout />,
    children: [
      {
        path: 'child',  // 实际路径为 /parent/child
        element: <ChildPage />
      }
    ]
  }
]);

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

使用Outlet组件渲染子路由

在父级组件中使用Outlet作为子路由的占位符：

import { Outlet } from 'react-router-dom';

function ParentLayout() {
  return (
    <div>
      <h1>父级页面</h1>
      <Outlet />  {/* 子路由内容将在此处渲染 */}
    </div>
  );
}

直接导航到二级路由

可以通过编程式导航或Link组件直接访问二级路由：

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

function SomeComponent() {
  const navigate = useNavigate();

  return (
    <>
      <Link to="/parent/child">通过Link跳转</Link>
      <button onClick={() => navigate('/parent/child')}>
        编程式导航
      </button>
    </>
  );
}

动态路由参数处理

如果需要带参数的二级路由：

const router = createBrowserRouter([
  {
    path: '/users',
    children: [
      {
        path: ':userId',
        element: <UserDetail />
      }
    ]
  }
]);

// 使用时
<Link to="/users/123">用户详情</Link>

注意事项

确保所有路由组件都包裹在<BrowserRouter>或<RouterProvider>中。嵌套路由的路径会自动拼接父路径，无需手动添加前缀。

对于需要在页面加载时直接访问的二级路由，浏览器地址栏应输入完整路径如http://localhost:3000/parent/child。生产环境需确保服务器配置支持前端路由，避免刷新404问题。