react如何路由跳转

React 路由跳转方法

在 React 中实现路由跳转通常使用 react-router-dom 库。以下是几种常见的路由跳转方式：

使用 Link 组件导航

Link 是 react-router-dom 提供的组件，用于声明式导航，类似于 HTML 的 <a> 标签。

import { Link } from 'react-router-dom';

function App() {
  return (
    <Link to="/about">跳转到 About 页面</Link>
  );
}

使用 useNavigate Hook（函数式跳转）

在函数组件中，可以通过 useNavigate Hook 实现编程式导航。

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about'); // 跳转到 /about
    navigate('/about', { replace: true }); // 替换当前路由（不保留历史记录）
    navigate(-1); // 返回上一页
  };

  return <button onClick={handleClick}>跳转</button>;
}

使用 history 对象（类组件）

在类组件中，可以通过 props.history 或直接使用 createBrowserHistory 实现跳转。

import { withRouter } from 'react-router-dom';

class Home extends React.Component {
  handleClick = () => {
    this.props.history.push('/about'); // 跳转并保留历史记录
    this.props.history.replace('/about'); // 替换当前路由
  };

  render() {
    return <button onClick={this.handleClick}>跳转</button>;
  }
}

export default withRouter(Home);

路由跳转传参

可以通过 URL 参数、查询参数或状态传递数据。

URL 参数

定义路由时配置参数：

<Route path="/user/:id" element={<User />} />

跳转时传递参数：

navigate('/user/123');

在目标组件中通过 useParams 获取：

const { id } = useParams();

查询参数

通过 URLSearchParams 或 qs 库处理：

navigate('/search?keyword=react');

在目标组件中通过 useLocation 获取：

const { search } = useLocation();
const params = new URLSearchParams(search);
const keyword = params.get('keyword');

状态传递

跳转时通过 state：

navigate('/about', { state: { fromHome: true } });

在目标组件中通过 useLocation 获取：

const { state } = useLocation();
console.log(state.fromHome); // true

重定向

使用 Navigate 组件实现条件重定向：

import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isAuth }) {
  return isAuth ? <Dashboard /> : <Navigate to="/login" />;
}

注意事项

1. 确保项目已安装 react-router-dom（v6 及以上版本）：

   npm install react-router-dom

2. 路由跳转前需在根组件中配置路由器（如 BrowserRouter）。
3. 动态路由参数需在目标组件中通过 useParams 获取。
4. 编程式导航时，useNavigate 只能在函数组件或自定义 Hook 中使用。