芜湖React学习马上迎来终章。这应该是学习笔记的最后一篇咯。
ReactRouter 官网放上。

ReactRouter理解

可将router文件直接理解为一个特殊组件，此组件根据URL进行指定渲染。
每一个Route可能会存在同级route或childrenRoute。
同级route就会出现渲染问题，即在当前URL下到底渲染哪个同级组件。
childrenRoute则依赖于上级route进行渲染。
同时ReactRouter接近于原生JS，所谓的路由守卫、校验都应当放在路由文件中进行检验然后动态渲染页面。

ReactRouter格式

//Router.config.js
export default ()=>
(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
          <Route path="new" element={<NewTeamForm />} />
          <Route index element={<LeagueStandings />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>
);

将路由逻辑当做一个Function组件来写并暴露。
最外层标签BrowserRouet为确定的组件模式。React提供7种模式。可将其分为两大类。Hash模式和History模式，建议根据具体需求来选择。
确定路由组件
Route标签内的Index表示当前URL默认渲染
:@name表示接受动态参数。这里动态参数接受ReactRouter有个默认优先级。首先回去匹配同级路由匹配不超过才会匹配动态参数
确定子组件显示位置。ReactRouter提供一个组件叫做<outlet />来确定组件显示。基础的路由已经配置好了下面记录下具体使用方法和ReactRouterMode的选择。 #ReactRouterMode

BrowserRouter

常用在Web页面，利用historyApi进行构建。使用浏览器本身的历史堆栈进行前进后退操作！
即每一次刷新都会发送新的请求！！！！

HashRouter

也是常用在Web页面，利用URL#后变化不会重读页面来构建。
刷新不会发送请求。

HistoryRouter

此模式特殊，必须就收一个history实例来构建。具体使用可以参考下面这篇博客。
具体使用需要搭配history
History完全解读

MemoryRouter

A <MemoryRouter> stores its locations internally in an array. Unlike <BrowserHistory> and <HashHistory>, it isn't tied to an external source, like the history stack in a browser. This makes it ideal for scenarios where you need complete control over the history stack, like testing.

大意就是这种模式下会自动创建一个initialEntries[]来记录URL。他不依赖任何外界源。 emmm就是说使用模式可以通过一个放置在内存里面的数组来查看URL记录。

nativeRouter和staticRouter

一个用在ReactNative一个用在node做服务端渲染。

好像没什么说的，不是很难的样子，暂时不记录了。

React学习笔记：ReactRouterV6（六）