react 如何写页面跳转
页面跳转的实现方式
在React中实现页面跳转可以通过多种方式，以下是常见的几种方法：
使用React Router的<Link>组件
React Router是React生态中最常用的路由库，通过<Link>组件可以实现声明式导航。
import { Link } from 'react-router-dom';
function App() {
return (
<div>
<Link to="/about">关于我们</Link>
</div>
);
}使用useNavigate钩子
React Router v6引入了useNavigate钩子，适用于编程式导航场景。
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about');
};
return <button onClick={handleClick}>跳转</button>;
}使用window.location
原生JavaScript方式，会触发页面完全刷新。
function RedirectButton() {
const redirect = () => {
window.location.href = '/about';
};
return <button onClick={redirect}>原生跳转</button>;
}使用<Redirect>组件
在React Router v5及以下版本可以使用重定向组件。
import { Redirect } from 'react-router-dom';
function ProtectedPage({ isLoggedIn }) {
if (!isLoggedIn) {
return <Redirect to="/login" />;
}
return <div>受保护内容</div>;
}动态路由跳转
传递参数时可以使用以下方式：
// 使用useNavigate传递state
navigate('/user', { state: { id: 123 } });
// 或通过URL参数
navigate('/user/123');路由配置基础示例
典型的路由配置示例：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}注意事项
- React Router v6与v5有重大API变更，需注意版本兼容性
- 编程式导航通常在事件处理或异步操作后使用
- 声明式导航更适合静态链接场景
- 使用原生跳转会丢失React应用状态
根据具体场景选择合适的方式，React Router的方案能保持单页应用的特性，避免页面完全刷新。
