React - 路由基本使用

import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
import { nanoid } from 'nanoid'
import { HashRouter, Route, Link } from 'react-router-dom'
 
const root = ReactDOM.createRoot(document.getElementById('root'))
 
class MyApp01 extends React.Component {
  // 使用HashRouter包住所有的代码
  // 作用：🍧类似于Vue中的new VueRouter() 负责实例化路由
  render() {
    return (
      <HashRouter>
        <div>
          <h1> MyApp01组件 </h1>
          {/* 使用Link组件跳转 */}
          <Link to="/home">跳到Home</Link>
          <br />
          <Link to="/my">跳到我的音乐</Link>
          <br />
          <Link to="/friend">跳到我的朋友</Link>
          {/* 使用Route设置匹配规则和挂载点 */}
          {/* 类似于Vue中，规则对象和挂载点二合一 */}
 
          <div className="box">
            <Route path="/home" component={HomeCom} />
            <Route path="/my" component={MusicCom} />
            <Route path="/friend" component={FriendCom} />
          </div>
        </div>
      </HashRouter>
    )
  }
}
 
function HomeCom() {
  return (
    <>
      <h1>我是首页组件</h1>
    </>
  )
}
 
function MusicCom() {
  return (
    <>
      <h1>我是音乐组件</h1>
    </>
  )
}
 
function FriendCom() {
  return (
    <>
      <h1>我是朋友组件</h1>
    </>
  )
}
const divNode = (
  <div>
    <MyApp01 />
  </div>
)
root.render(divNode)