当前位置：首页 > React

react路由实现app切换

2026-01-27 17:22:53React

路由基础配置

在React中实现应用页面切换通常使用react-router-dom库。安装依赖包后，在入口文件（如index.js）中包裹BrowserRouter组件：

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

定义路由规则

在组件内部通过Routes和Route定义路径与组件的映射关系。例如在App.js中：

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

导航跳转实现

使用Link组件或useNavigate钩子进行页面跳转。两种方式的示例如下：

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

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

  return (
    <div>
      <Link to="/about">关于页面</Link>
      <button onClick={() => navigate('/')}>返回首页</button>
    </div>
  );
}

动态路由处理

通过冒号语法定义动态参数，在组件内使用useParams获取：

<Route path="/user/:id" element={<UserProfile />} />

// UserProfile组件内
import { useParams } from 'react-router-dom';
function UserProfile() {
  const { id } = useParams();
  return <div>用户ID: {id}</div>;
}

嵌套路由配置

通过Outlet组件实现嵌套路由的视图渲染：

// 父路由配置
<Route path="/dashboard" element={<Dashboard />}>
  <Route path="stats" element={<Stats />} />
  <Route path="settings" element={<Settings />} />
</Route>

// Dashboard组件内需要包含Outlet
import { Outlet } from 'react-router-dom';
function Dashboard() {
  return (
    <div>
      <h1>控制台</h1>
      <Outlet />
    </div>
  );
}

路由守卫实现

通过高阶组件或自定义包装组件实现权限控制：

function PrivateRoute({ element: Element, ...rest }) {
  const isAuthenticated = checkAuth();

  return isAuthenticated ? (
    <Element {...rest} />
  ) : (
    <Navigate to="/login" replace />
  );
}

// 使用方式
<Route path="/admin" element={<PrivateRoute element={AdminPanel} />} />

路由懒加载优化

使用React.lazy和Suspense实现组件按需加载：

react路由实现app切换

const About = React.lazy(() => import('./About'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}