84 - 《手写 Umi 二：路由和 SPA》

本文为「手写 Umi」的第二篇，课程大纲见 75 - 《一份新大纲：「极简框架课：手写 Umi」》。

先上 DEMO，在的前一篇的基础上增加了路由功能，基于成熟方案 react-router@6，添加 About 路由组件，让应用成为 SPA（Single Page Application）。

关键代码是这么几行，

import { HashRouter, Route, Routes, Outlet, Link } from 'react-router-dom';

ReactDOM.render((
 <HashRouter>
  <Routes>
   <Route path="/" element={<Layout />}>
    <Route path="" element={<App />} />
    <Route path="about" element={<About />} />
   </Route>
  </Routes>
 </HashRouter>
), document.getElementById('root'));

// 布局组件
function Layout() {
 return (
  <div>
   <div>
    <Link to="/">Home</Link> /
    <Link to="/about">About</Link>
   </div>
   <Outlet />
  </div>
 )
}

在上一节的基础上，我们讲 ReactDOM.render 渲染的根组件换成了 HashRouter 等，内部有一个 <Layout /> 的全局布局组件，然后用 <App />（上一节的 Todos App）渲染 / 路径，用 <About /> 渲染 /about 路径。

看到这代码，初学者可能会有很多问题。

1、react-router 和 react-router-dom 是什么关系？
2、HashRouter、Routes 和 Route 的关系是啥？
3、HashRouter 啥意思？
4、Outlet 什么用？
5、为啥用 Link 不用 a 标签？
6、…

react-rou