4_路由.md

[github-actions]

我是页眉

---

正则匹配链接[]()语法上有局限性 , 如有疑虑可查看本文原文

在React中，页面之间的跳转通常通过React Router库来实现。React Router是React官方提供的路由库，用于在单页面应用（SPA）中管理导航。

以下是在React中使用React Router实现页面跳转的基本步骤：

1. 安装 React Router：
   在项目中安装React Router。你可以使用以下命令：

   npm install react-router-dom

2. 设置路由：
   在你的React应用中，使用React Router来设置路由。通常，你需要在src目录下创建一个components文件夹，并在其中创建你的页面组件。

   // components/Home.js
   import React from 'react';
   
   const Home = () => {
     return <h1>Home Page</h1>;
   };
   
   export default Home;

   // components/About.js
   import React from 'react';
   
   const About = () => {
     return <h1>About Page</h1>;
   };
   
   export default About;

   // App.js
   import React from 'react';
   import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
   import Home from './components/Home';
   import About from './components/About';
   
   const App = () => {
     return (
       <Router>
         <div>
           <nav>
             <ul>
               <li>
                 <Link to="/">Home</Link>
               </li>
               <li>
                 <Link to="/about">About</Link>
               </li>
             </ul>
           </nav>
   
           <hr />
   
           <Route path="/" exact component={Home} />
           <Route path="/about" component={About} />
         </div>
       </Router>
     );
   };
   
   export default App;

3. 实现跳转：
   在React组件中，你可以使用Link组件或history对象的push方法来实现跳转。

   // components/Home.js
   import React from 'react';
   import { Link } from 'react-router-dom';
   
   const Home = () => {
     return (
       <div>
         <h1>Home Page</h1>
         <Link to="/about">Go to About</Link>
       </div>
     );
   };
   
   export default Home;

   如果在函数组件中无法直接使用Link，你可以使用useHistory钩子。

   // components/Home.js
   import React from 'react';
   import { useHistory } from 'react-router-dom';
   
   const Home = () => {
     const history = useHistory();
   
     const handleClick = () => {
       history.push('/about');
     };
   
     return (
       <div>
         <h1>Home Page</h1>
         <button onClick={handleClick}>Go to About</button>
       </div>
     );
   };
   
   export default Home;

这就是使用React Router实现页面跳转的基本步骤。请注意，React Router的详细用法和配置取决于项目的需求和版本，建议查阅React Router的官方文档以获取更多信息。

---

我是页脚