react如何确定页面跳转
页面跳转的基本方法
在React中实现页面跳转通常使用路由库react-router-dom，它提供了多种导航方式。以下是常见的几种方法：
使用<Link>组件
import { Link } from 'react-router-dom';
function NavBar() {
return (
<Link to="/target-path">跳转到目标页</Link>
);
}编程式导航（通过useNavigate钩子）
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path');
// 或带状态跳转
navigate('/target-path', { state: { id: 1 } });
};
return <button onClick={handleClick}>跳转</button>;
}路由参数传递方式
路径参数（动态路由）
// 路由配置
<Route path="/user/:id" element={<UserPage />} />
// 跳转时传递
navigate('/user/123');
// 目标页获取参数
const { id } = useParams();查询参数（URLSearchParams）
navigate('/search?keyword=react');
// 目标页获取
const [searchParams] = useSearchParams();
const keyword = searchParams.get('keyword');状态传递（通过location.state）
navigate('/detail', { state: { itemId: 456 } });
// 目标页获取
const { state } = useLocation();
const itemId = state?.itemId;路由守卫与跳转拦截
全局前置守卫
import { useLocation, Navigate } from 'react-router-dom';
function PrivateRoute({ children }) {
const auth = useAuth(); // 自定义鉴权逻辑
const location = useLocation();
if (!auth) {
return <Navigate to="/login" state={{ from: location }} />;
}
return children;
}路由配置中应用守卫
<Route
path="/dashboard"
element={
<PrivateRoute>
<Dashboard />
</PrivateRoute>
}
/>跳转行为控制
替换当前历史记录
navigate('/new-path', { replace: true });相对路径跳转
navigate('../parent-path'); // 相对于当前路径监听路由变化
useEffect(() => {
const unlisten = history.listen((location) => {
console.log('路由变化:', location);
});
return () => unlisten();
}, []);常见问题解决方案
V6版本路由跳转报错 确保已正确安装最新版：
npm install react-router-dom@6页面刷新后state丢失 建议将关键数据同时通过URL参数或持久化存储（如localStorage）传递。
嵌套路由跳转 使用相对路径时需注意当前层级：
// 在 /users/123 下跳转到 /users/123/profile
navigate('profile'); // 相对路径通过以上方法可以灵活实现React应用中的各种页面跳转需求，根据具体场景选择合适的方式处理导航逻辑。
