react如何局部路由
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>
);
}注意事项
- 嵌套路由适合需要保持父组件布局不变的场景
- 条件渲染适合简单的局部切换且不需要浏览器历史记录的情况
- 动态导入能优化性能但需要处理加载状态
- 确保局部路由变化时不会意外重置父组件状态
