react路由如何跳转
React 路由跳转方法
React 路由跳转可以通过多种方式实现，以下是常见的几种方法：
使用 Link 组件
Link 是 React Router 提供的导航组件，用于声明式导航。它会在不刷新页面的情况下更新 URL 并渲染对应的组件。
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/about">About</Link>
);
}使用 useNavigate Hook
React Router v6 引入了 useNavigate Hook，用于编程式导航。可以在事件处理函数或其他逻辑中调用。
import { useNavigate } from 'react-router-dom';
function App() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about');
};
return (
<button onClick={handleClick}>Go to About</button>
);
}使用 history 对象
在 React Router v5 及以下版本，可以通过 history 对象进行跳转。
import { useHistory } from 'react-router-dom';
function App() {
const history = useHistory();
const handleClick = () => {
history.push('/about');
};
return (
<button onClick={handleClick}>Go to About</button>
);
}使用 Redirect 组件
Redirect 组件用于重定向到另一个路由，通常在条件渲染中使用。
import { Redirect } from 'react-router-dom';
function App() {
const isLoggedIn = false;
if (!isLoggedIn) {
return <Redirect to="/login" />;
}
return <div>Welcome</div>;
}使用 NavLink 组件
NavLink 是 Link 的增强版，可以为当前激活的路由添加样式。
import { NavLink } from 'react-router-dom';
function App() {
return (
<NavLink
to="/about"
activeClassName="active"
>
About
</NavLink>
);
}路由跳转传参
通过 URL 参数传递
可以在跳转时通过 URL 传递参数。
navigate('/user/123');通过查询参数传递
使用 useNavigate 传递查询参数。
navigate('/user?name=John');通过状态传递
可以在跳转时传递状态对象。
navigate('/user', { state: { id: 123 } });动态路由匹配
在路由配置中使用动态参数。
<Route path="/user/:id" element={<User />} />在组件中获取参数。
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}注意事项
- React Router v6 不再支持
useHistory，改用useNavigate。 Redirect在 v6 中被Navigate组件替代。- 确保路由配置正确，否则跳转可能无效。
通过以上方法，可以灵活实现 React 应用中的路由跳转和参数传递。
