当前位置：首页 > React

react如何局部路由

2026-01-23 17:57:49React

局部路由的实现方法

在React中实现局部路由（即在组件内部嵌套路由）通常使用react-router-dom库。以下是几种常见方法：

使用嵌套路由

通过<Route>组件嵌套实现局部路由，父路由的组件中定义子路由：

react如何局部路由

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

function ParentComponent() {
  return (
    <div>
      <h2>Parent Component</h2>
      <Routes>
        <Route path="child1" element={<Child1 />} />
        <Route path="child2" element={<Child2 />} />
      </Routes>
    </div>
  );
}

动态路由参数

通过URL参数实现局部内容切换：

<Route path="/parent/:dynamicId" element={<ParentWithDynamicContent />} />

function ParentWithDynamicContent() {
  const { dynamicId } = useParams();
  return (
    <div>
      {dynamicId === 'view1' && <ComponentA />}
      {dynamicId === 'view2' && <ComponentB />}
    </div>
  );
}

使用Outlet组件

通过<Outlet>实现布局路由的嵌套内容：

react如何局部路由

function Layout() {
  return (
    <div>
      <nav>Navigation</nav>
      <Outlet />  {/* 子路由内容将渲染在这里 */}
    </div>
  );
}

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path="dashboard" element={<Dashboard />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

条件渲染组件

在组件内部根据状态决定渲染内容：

function LocalRouter() {
  const [currentView, setCurrentView] = useState('home');

  return (
    <div>
      <button onClick={() => setCurrentView('home')}>Home</button>
      <button onClick={() => setCurrentView('about')}>About</button>

      {currentView === 'home' && <HomeComponent />}
      {currentView === 'about' && <AboutComponent />}
    </div>
  );
}

记忆路由状态

使用useLocation和useNavigate实现更精细的控制：

function LocalNavigation() {
  const location = useLocation();
  const navigate = useNavigate();

  const handleTabChange = (tab) => {
    navigate(`?tab=${tab}`);
  };

  const currentTab = new URLSearchParams(location.search).get('tab');

  return (
    <div>
      <button onClick={() => handleTabChange('profile')}>Profile</button>
      <button onClick={() => handleTabChange('messages')}>Messages</button>

      {currentTab === 'profile' && <Profile />}
      {currentTab === 'messages' && <Messages />}
    </div>
  );
}

每种方法适用于不同场景，嵌套路由适合复杂应用结构，条件渲染适合简单UI切换，Outlet提供更清晰的布局分离。