当前位置：首页 > React

react导航如何实现

2026-02-12 08:15:25React

实现 React 导航的方法

使用 React Router
React Router 是 React 生态中最流行的导航解决方案。通过 react-router-dom 库可以实现客户端路由。安装后，通过 BrowserRouter、Routes 和 Route 组件定义路由结构。

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

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

动态路由与参数传递
通过 useParams 可以获取动态路由参数。例如，定义路由时使用 :id 占位符，组件内通过 useParams 读取参数。

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

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

编程式导航
使用 useNavigate 钩子实现编程式跳转。例如，在按钮点击时跳转到指定路径。

import { useNavigate } from "react-router-dom";
function Home() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate("/about")}>Go to About</button>
  );
}

嵌套路由
通过嵌套 Route 组件实现多级路由。父路由的组件中需使用 <Outlet /> 渲染子路由内容。

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

// Dashboard 组件内
import { Outlet } from "react-router-dom";
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 子路由内容在此渲染 */}
    </div>
  );
}

路由守卫（权限控制）
通过封装高阶组件或自定义路由逻辑实现权限控制。例如，检查用户是否登录，未登录则重定向到登录页。

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth(); // 自定义认证逻辑
  const navigate = useNavigate();
  if (!isAuthenticated) {
    navigate("/login");
    return null;
  }
  return children;
}

// 使用示例
<Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} />