react如何局部路由

局部路由的实现方法

在React中实现局部路由（即在组件内部嵌套路由）可以通过React Router库完成。React Router v6提供了<Outlet>组件和嵌套路由配置，适合处理局部路由场景。

安装React Router

确保项目已安装React Router v6：

npm install react-router-dom

基础配置示例

在根组件中配置基础路由结构：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="products" element={<Products />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

使用Outlet组件

在父组件（如Layout）中使用<Outlet>作为子路由的渲染位置：

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

function Layout() {
  return (
    <div>
      <header>导航栏</header>
      <main>
        <Outlet /> {/* 子路由将在此处渲染 */}
      </main>
    </div>
  );
}

嵌套局部路由

在子组件内部继续嵌套路由：

function Products() {
  return (
    <div>
      <h2>产品列表</h2>
      <Routes>
        <Route path="/" element={<ProductList />} />
        <Route path=":id" element={<ProductDetail />} />
      </Routes>
    </div>
  );
}

动态路由参数

通过useParams获取路由参数：

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

function ProductDetail() {
  const { id } = useParams();
  return <div>当前产品ID: {id}</div>;
}

相对路径导航

在嵌套路由中使用相对路径进行导航：

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

function ProductList() {
  return (
    <div>
      <Link to="123">查看产品123</Link>
    </div>
  );
}

注意事项

• 嵌套路由的路径会自动拼接父级路由路径
• 使用<Routes>组件需确保其在<BrowserRouter>或<MemoryRouter>上下文内
• 通过useOutlet钩子可以检查当前是否存在激活的子路由

这种方法允许在任意组件层级创建独立的路由上下文，实现真正的局部路由功能。