以下是一个简单示例，展示了如何使用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来进行跳转逻辑的实现
