当前位置：首页 > React

react如何切换页面

2026-03-11 01:29:37React

路由基础配置

在React中切换页面通常通过路由库实现，react-router-dom是主流选择。安装后，在入口文件（如App.js）中配置基本路由结构：

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

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

导航链接实现

使用Link组件或useNavigate钩子进行页面跳转：

// 使用Link组件（适合静态导航）
import { Link } from 'react-router-dom';
<Link to="/about">关于我们</Link>

// 使用useNavigate（适合编程式导航）
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
<button onClick={() => navigate('/about')}>跳转</button>

动态路由与参数传递

支持路径参数和查询参数：

// 配置动态路由
<Route path="/user/:id" element={<UserProfile />} />

// 跳转时传递参数
navigate('/user/123'); // 路径参数
navigate('/user?id=123'); // 查询参数

// 在目标组件中获取参数
import { useParams, useLocation } from 'react-router-dom';
const { id } = useParams(); // 路径参数
const { search } = useLocation(); // 查询参数（需手动解析）

嵌套路由配置

通过嵌套Route实现布局复用：

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="settings" element={<Settings />} />
</Route>

路由守卫与重定向

通过高阶组件或Navigate组件控制访问权限：

react如何切换页面

// 条件重定向
<Route 
  path="/admin" 
  element={isAdmin ? <AdminPage /> : <Navigate to="/login" />} 
/>

// 全局路由守卫
const PrivateRoute = ({ children }) => {
  const auth = useAuth();
  return auth ? children : <Navigate to="/login" />;
};