react router如何跳转
React Router 跳转方式
React Router 提供了多种方式进行页面跳转，以下是常见的几种方法：
使用 <Link> 组件
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<Link to="/target-path">跳转到目标页面</Link>
);
}使用 useNavigate Hook（React Router v6）
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>
);
}使用 history.push（React Router v5及以下）
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
history.push('/target-path');
};
return (
<button onClick={handleClick}>跳转</button>
);
}编程式导航带参数
// 跳转时传递参数
navigate('/target-path', {
state: { id: 123 },
replace: true // 可选，替换当前历史记录
});
// 目标页面获取参数
const location = useLocation();
const { id } = location.state;重定向 <Navigate> 组件
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
return isAuthenticated ? <MyComponent /> : <Navigate to="/login" />;
}注意事项
- React Router v6 使用
useNavigate替代了 v5 的useHistory replace参数可以控制是否替换历史记录而不是新增- 路径参数可以通过
:param定义并在目标组件用useParams获取
