react怎么实现滑动切换页面

在React中实现滑动切换页面可以使用React Router库和一些CSS样式来完成。

首先，安装React Router库：

npm install react-router-dom 

接下来，创建一个包含多个页面的组件，例如App组件：

import React from 'react'; import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; import './App.css';  import Home from './pages/Home'; import About from './pages/About'; import Contact from './pages/Contact';  const App = () => {   return (     <Router>       <div className="app">         <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 path="/" exact component={Home} />           <Route path="/about" component={About} />           <Route path="/contact" component={Contact} />         </Switch>       </div>     </Router>   ); }  export default App; 

在上面的代码中，使用了BrowserRouter作为Router组件，并在nav中定义了三个链接，分别对应着Home、About和Contact页面。Switch组件用于确保只有一个路由能够匹配。

接下来，创建每个页面的组件，例如Home组件：

import React from 'react';  const Home = () => {   return (     <div>       <h1>Home Page</h1>       <p>Welcome to the home page!</p>     </div>   ); }  export default Home; 

同样地，创建About和Contact页面的组件。

之后，添加CSS样式以实现滑动切换页面的效果，在App.css文件中添加以下样式：

.app {   display: flex;   height: 100vh; }  nav {   width: 20%;   background-color: #f0f0f0;   padding: 20px; }  nav ul {   list-style-type: none; }  nav ul li {   margin-bottom: 10px; }  nav ul li a {   text-decoration: none;   color: #000; }  .content {   flex: 1;   padding: 20px;   overflow-y: scroll;   -webkit-overflow-scrolling: touch;   transition: transform 0.3s ease; }  .content-enter {   transform: translateX(100%); }  .content-enter-active {   transform: translateX(0); }  .content-exit {   transform: translateX(0); }  .content-exit-active {   transform: translateX(-100%); } 

最后，运行应用程序并进行页面切换时，页面将具有滑动切换的效果。

请注意，这只是一种实现滑动切换页面的方法，具体的实现方式可能因项目需求而有所不同。