React路由跳转的几种方式

React中实现路由跳转主要有以下几种方式：

1. 使用react-router-dom提供的<Link>和<NavLink>组件。

import { Link, NavLink } from 'react-router-dom';
 
// 普通链接
<Link to="/about">About</Link>
 
// 带样式的导航链接（当路径匹配时会添加样式）
<NavLink to="/about" activeClassName="active">About</NavLink>

2. 使用useHistory钩子进行编程式跳转。

import { useHistory } from 'react-router-dom';
 
function App() {
  let history = useHistory();
 
  function handleNavigation() {
    history.push('/about');
  }
 
  return (
    <button onClick={handleNavigation}>Go to About</button>
  );
}

3. 使用useLocation钩子来获取当前位置信息。

import { useLocation } from 'react-router-dom';
 
function App() {
  let location = useLocation();
 
  return (
    <div>You are currently on {location.pathname}</div>
  );
}

4. 使用Redirect组件进行重定向。

import { Redirect } from 'react-router-dom';
 
function App() {
  return (
    <Redirect to="/about" />
  );
}

5. 使用withRouter高阶组件来访问history对象。

import { withRouter } from 'react-router-dom';
 
class App extends React.Component {
  handleNavigation = () => {
    this.props.history.push('/about');
  }
 
  render() {
    return (
      <button onClick={this.handleNavigation}>Go to About</button>
    );
  }
}
 
export default withRouter(App);

以上是React路由跳转的几种常见方式，具体使用哪种取决于应用场景和个人喜好。