react-router-dom源码解析(二) -index

react-router-dom源码学习系列第二篇, 主要讲解如何对react-router-dom的目录结构进行规划, 毕竟看源码只是了解作者的想法, 如何用自己的想法写出来, 我想这才是最重要的

一、更新

[2019-4-21]

Fixed

修复图片链接失效问题

Changed

改进文章格式

二、目录规划

上一篇文章主要说了react-router-dom的源代码目录的总体架构, 了解到了其基本的文件划分, 这一篇文章也是对我们自己的源代码目录进行规划. 毕竟多说不练非君子…

使用create-react-app快速搭建一个开发环境, 我习惯用tsx进行书写, 所以该命令大致是这样的:

1	create-react-app yyg-react-router-dom --scripts-version=react-scripts-ts

然后cd到项目文件夹下, 创建src并在其下创建同名目录, 代表我们自己编写的react-router-dom, 并在之中新建react-router-dom对应的各个组件:

react-router-dom组件结构

在任意一个组件文件中, 书写入如下代码:

import * as React from 'react';

export interface IHashRouterProps { };

const HashRouter = React.memo<IHashRouterProps>((
  props: IHashRouterProps,
): JSX.Element => {
  return (
    <React.Fragment />
  );
});

export default HashRouter;

同理, 将上述模板分别copy到其他剩余的七个组件中, 并将组件内部的函数名称修改为组件对应的名称就可以了.

注意: 这里只是做一个测试而已, 同理, 将上述模板分别copy到其他剩余的七个组件中, 并且修改为组件对应的名称.

我们穷鬼是这样的啦

三、index导入

最后, 在index.tsx中导入我们自己的react-router-dom组件, 作统一导出, 一方面是为了美观, 更重要的是我们的组件规范.

在index.tsx中:

// src/yyg-react-router-dom/index.tsx

import BrowserRouter from './components/BrowserRouter';
import HashRouter from './components/HashRouter';
import Link from './components/Link';
import NavLink from './components/NavLink';
import Redirect from './components/Redirect';
import Route from './components/Route';
import Switch from './components/Switch';
import withRouter from './components/withRouter';

export {
  BrowserRouter,
  HashRouter,
  Link,
  NavLink,
  Redirect,
  Route,
  Switch,
  withRouter,
};

作完这一步, 我们的项目基本结构基本搭建好了, 后续的可能会用到的工具函数, 后面再说…

下一篇, 会学习BrowserRouter组件的源码, 搞起!

DZY