如何用react写页面跳转
使用React Router进行页面跳转
React Router是React生态中最常用的路由管理库，适用于单页面应用（SPA）的导航和页面跳转。以下是具体实现方法：
安装React Router库
npm install react-router-dom配置基本路由结构
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}编程式导航实现跳转
在组件中使用useNavigate钩子进行跳转：
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/about')}>
跳转到关于页面
</button>
);
}带参数的跳转方式
传递参数并跳转：
navigate('/user', { state: { id: 123 } });
// 或
navigate('/user/123');接收参数：
// 对于state方式
const location = useLocation();
const { id } = location.state;
// 对于路径参数
<Route path="/user/:id" element={<User />} />
function User() {
const { id } = useParams();
}路由守卫实现权限控制
通过高阶组件保护路由：
function PrivateRoute({ children }) {
const isAuthenticated = checkAuth();
const navigate = useNavigate();
if (!isAuthenticated) {
navigate('/login');
return null;
}
return children;
}
// 使用方式
<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />常见跳转方法比较
Link组件：适合声明式导航，渲染为<a>标签useNavigate：适合事件触发的编程式导航redirect：适合在渲染过程中重定向useHistory（v5）：React Router 5的旧API，v6已替换为useNavigate
动态路由匹配
实现通配符路由：
<Route path="/product/*" element={<Product />} />处理404页面：
<Route path="*" element={<NotFound />} />路由懒加载优化性能
使用React.lazy实现按需加载：
const About = React.lazy(() => import('./About'));
<Suspense fallback={<Loader />}>
<Route path="/about" element={<About />} />
</Suspense>
