1. 项目搭建

创建项目

npx create-react-app xpic --template typescript

使用 React Router 6

安装 react-router-dom

yarn add react-router-dom

使用 HashRouter 包裹 App 组件

import {HashRouter} from 'react-router-dom'
ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

在 App 组件中添加 Routes

function App() {
  return (
     <>
     <Header />
     <Routes>
       <Route path='/' element={<Home />} />
       <Route path='/about' element={<About />} />
       <Route path='/history' element={<History />} />
     </Routes>
     <Footer />
     </>
  );
}

在 Header 组件中添加 links

<nav>
  <Link to="/">首页</Link>
  <Link to="/history">上传历史</Link>
  <Link to="/about">关于</Link>
</nav>