react路由跳转

React中的路由跳转可以通过React Router实现。下面是一个简单的例子：

首先，你需要安装React Router：

npm install react-router-dom

然后，在你的组件中导入`BrowserRouter`和`Link`组件：

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

在`BrowserRouter`中定义你的路由规则，例如：

<BrowserRouter>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>

    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/contact">
        <Contact />
      </Route>
    </Switch>
  </div>
</BrowserRouter>

其中，`<Link>`组件用于定义路由链接，`to`属性指定链接的目标路由。`<Route>`组件用于匹配路由，并渲染对应的组件。

你可以在组件中使用`useHistory`钩子实现编程式路由跳转，例如：

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

function MyComponent() {
  const history = useHistory();

  function handleClick() {
    history.push('/new-route');
  }

  return (
    <button onClick={handleClick}>
      Go to new route
    </button>
  );
}

这里，我们通过`history.push()`方法实现了路由跳转。