在React中，你可以使用react-router-dom库来实现页面的跳转。该库提供了一些组件和函数，用于管理路由和导航。

以下是一个简单示例，展示了如何使用React Router进行页面跳转：

1. 首先，确保已经安装了react-router-dom。可以使用npm或yarn来安装它。

   npm install react-router-dom //npm
   
   
   yarn add react-router-dom  //yarn
   

2. 在你的应用程序中导入所需的组件和函数

   import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
   

3. 使用Router组件将应用程序包裹起来，并设置路由规则。

   <Router>
     <div>
       <nav>
         <ul>
           <li>
             <Link to="/">Home</Link> {/* 导航到根路径 */}
           </li>
           <li>
             <Link to="/about">About</Link> {/* 导航到/about路径 */}
           </li>
           <li>
             <Link to="/contact">Contact</Link> {/* 导航到/contact路径 */}
           </li>
         </ul>
       </nav>
   
       {/* 路由的切换由Switch组件来管理 */}
       <Switch>
         <Route path="/about">
           <AboutPage /> {/* 当匹配到/about路径时，渲染AboutPage组件 */}
         </Route>
         <Route path="/contact">
           <ContactPage /> {/* 当匹配到/contact路径时，渲染ContactPage组件 */}
         </Route>
         <Route path="/">
           <HomePage /> {/* 默认情况下，渲染HomePage组件 */}
         </Route>
       </Switch>
     </div>
   </Router>
   

4. 在对应的组件中实现跳转逻辑。

   import { useHistory } from 'react-router-dom';
   
   function HomePage() {
     const history = useHistory();
   
     const handleClick = () => {
       history.push('/about'); // 跳转到/about路径
     };
   
     return (
       <div>
         <h1>Home Page</h1>
         <button onClick={handleClick}>Go to About</button>
       </div>
     );
   }
   
   // 同样的，在AboutPage和ContactPage组件中也可以使用useHistory来进行跳转逻辑的实现