react 实现页面的跳转
使用 React Router 实现页面跳转
React 本身不提供内置的路由功能，通常使用 react-router-dom 库实现页面跳转。以下是具体实现方法：
安装 react-router-dom 依赖包：
npm install 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>
);
}编程式导航
在组件中使用 useNavigate hook 进行跳转：
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about'); // 跳转到 about 页面
// navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>Go to About</button>;
}声明式导航
使用 <Link> 组件实现声明式导航：
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}动态路由与参数传递
配置动态路由：
<Route path="/user/:id" element={<UserProfile />} />获取路由参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}重定向
使用 <Navigate> 组件实现重定向：
import { Navigate } from 'react-router-dom';
function PrivateRoute({ isAuthenticated }) {
return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}路由守卫
通过高阶组件实现路由守卫：
function ProtectedRoute({ children }) {
const isAuth = checkAuth(); // 自定义认证逻辑
return isAuth ? children : <Navigate to="/login" />;
}
// 使用方式
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>嵌套路由
实现嵌套路由结构：
<Route path="/admin" element={<AdminLayout />}>
<Route index element={<AdminDashboard />} />
<Route path="users" element={<UserManagement />} />
</Route>在布局组件中使用 <Outlet> 渲染子路由：
import { Outlet } from 'react-router-dom';
function AdminLayout() {
return (
<div>
<AdminHeader />
<Outlet />
</div>
);
}
