当前位置：首页 > React

react如何局部路由

2026-02-11 21:57:21React

React 局部路由实现方法

在 React 中实现局部路由（即部分内容切换而非整个页面刷新）通常通过以下方式完成：

使用 react-router-dom 的嵌套路由

安装 react-router-dom 包后，在父组件中定义 <Outlet> 作为子路由的渲染位置：

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

function ParentComponent() {
  return (
    <div>
      <nav>
        <Link to="child1">Child 1</Link>
        <Link to="child2">Child 2</Link>
      </nav>
      <Outlet /> {/* 子路由将在此处渲染 */}
    </div>
  );
}

路由配置中需使用嵌套结构：

const router = createBrowserRouter([
  {
    path: "/",
    element: <ParentComponent />,
    children: [
      { path: "child1", element: <Child1 /> },
      { path: "child2", element: <Child2 /> }
    ]
  }
]);

条件渲染组件

通过状态控制局部内容的显示与隐藏：

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

  return (
    <div>
      <button onClick={() => setCurrentView('viewA')}>View A</button>
      <button onClick={() => setCurrentView('viewB')}>View B</button>

      {currentView === 'viewA' && <ViewA />}
      {currentView === 'viewB' && <ViewB />}
    </div>
  );
}

动态导入与懒加载

结合 React.lazy 实现按需加载局部内容：

const ViewA = lazy(() => import('./ViewA'));
const ViewB = lazy(() => import('./ViewB'));

function LazyLocalRouter() {
  const [currentView, setCurrentView] = useState('viewA');

  return (
    <Suspense fallback={<div>Loading...</div>}>
      {currentView === 'viewA' ? <ViewA /> : <ViewB />}
    </Suspense>
  );
}

使用 URL 参数控制

通过路由参数决定渲染哪个局部组件：

const router = createBrowserRouter([
  {
    path: "/content/:tabId",
    element: <ContentRouter />
  }
]);

function ContentRouter() {
  const { tabId } = useParams();

  return (
    <div>
      {tabId === 'settings' && <Settings />}
      {tabId === 'profile' && <Profile />}
    </div>
  );
}