import React from 'react';

//导入“react-router-dom"组件

import {  BrowserRouter as Router,  Routes,  Route,  Link } from "react-router-dom";

import AboutMe from './pages/AboutMe';

import BlogList from './article/index';

import Hi from './pages/Hi';

// 定义路由数组routes（这是一个包含多个路由对象的数组，每个对象定义了一个路径（path）和对应的React组件（element））

const routes =[
  {
    path: '/about_me',
    element: <AboutMe/>,
  },
  {
    path: '/blog_list',
    element: <BlogList/>,
  },
  {
    path: '/hi',
    element: <Hi/>
  }
];

// 定义App组件

function App() {
  return (

    // <Router>包装整个应用程序，提供路由功能，这里使用的是BrowserRouter，它根据浏览器的URL来渲染不同的组件
    <Router>

      // <div> 包含导航连接件和路由渲染区域的容器
      <div>

        // 一个无序列表，包含导航链接
        <ul>

          // 列表项，包含<Link>组件
          <li>

             // <Link> React Router的链接组件，用于导航到应用程序的不同部分。当用户点击链接时，URL将更新，而页面不会重新加载
            <Link to='/blog_list'>Blog List</Link>
          </li>
          <li>
            <Link to='/about_me'>About Me</Link>
          </li>

          <li>
            <Link to='/hi'>hi</Link>
          </li>
        </ul>

        // 包含多个<Route>组件容器，用于定义应用程序的路由逻辑
        <Routes>
        {

          // routes.map(...)使用map函数遍历routes数组，为每个路由对象生成一个<Route>组件
          routes.map(function(route, i) {
            return (

              // 为每个路由生成<Route>组件定义了路径和要渲染的组件
              <Route path={route.path} element={route.element} />
            )
          })
        }
        </Routes>
      </div>
    </Router>
  );
};

export default App;

import React, { Component } from 'react';

export default class Hi extends Component {

  render() {

    return (
      <p> HI hihihi, from component </p>
    );
  }
}

import React from 'react';

function AboutMe() {
  return (
    <div>
      <p>Hello World!</p>
    </div>
  );
};

export default AboutMe;