项目记录：react路由的使用方法、react组件引用路径优化、exports,export的区别

react路由

今天在写项目的过程中，重新遇到了react-router,因为不同版本的react-router使用方法有一定的出入，所以我觉得还是要总结一下。
首先这里用到的react-router是v5版本的；

• 首先需要一个BrowserRouter包裹使用路由的地方，这是一个路由器，例如在index.js中：
  

• 其次，需要定义路由映射；
  

• 最后，使用路由：
  
  这里遇到了一个坑，刚开始忘记了在最外层已经包裹了browserrouter,然后在里面我就重新包装了一个hashrouter,然后发现路径一直不对，后来发现路径里面带#，就排除可能是hashrouter的问题，一步步排查，才找到问题所在；

利用index.js文件进行模块引用路径优化

这个方法我是之前写react-typescript代码的时候遇到的，当时还感受不到这种方法的优越性所在，然后现在我自己开始搭建项目了，发现确实组件变多的情况下，只要其中组件路径发生改变了，就要改很多地方，我才体会到这种方法的优越性所在，下面详细说一下这个过程：

src文件下保存pages文件夹，用于存放所有的组件，如下所示，有home子文件夹保存home组件的相关文件：

在每个组件子文件下，新建一个index.js文件，用于暴露组件，比如home文件夹下的index.js:

一层层暴露出去，这个时候pages文件下的index.js文件：

这个时候，如果其他文件要引用pages里面的组件，就直接从'./pages'中引用，而不用'/pages/home/Home'

比如这里三个组件，按理说我引用要分别写三句话引用，但是用了这种暴露的方法，直接一句话解决了：

这里有个很坑的点！！！就是我上面写：

export * from './xx'

这个针对于，xx文件中的组件暴露方式是export function xxx,因为export *表示的就是暴露除了export default之外的所有export暴露；

但是如果我们组件暴露方式是exprort default xxx
,那么需要我们先引入，再暴露：
就像这样：

呜呜，这里写的可能不是很清楚，具体可以参见这篇文章，本来这个地方卡了很久，这篇文章让我豁然开朗！！！
React 如何利用index.js文件进行‘模块引用路径优化’

export和exports的区别

此外我发现，我在项目中写的代码多了之后，很容易就搞混export和exports的区别，老是在这种地方报错，也记录一下：

• module.exports和exports都属于CommonJS模块规范，export和export default是属于ES6语法；
• module.exports和exports导出模块，用require引入模块，export和export default导出模块，用import导入模块；
• 通过export方式导出，在导入时要加{ }，export default则不需要，使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

使用module.exports导出模块：

var x = 1;
var add = function (val) {
  return val + x;
};
module.exports.x = x;
module.exports.add = add;

使用require引入：

var x = 1;
var demo = require('./demo.js');

console.log(demo.x); // 1
console.log(demo.add(1)); // 6

exports一般这样使用，本质上和module.exports是一样的，可以把exports看成一个对象，在上面加方法和变量

var exports = module.exports;

module.exports和exports的用法是后面加一个等号，再接具体的导出:

module.exports=...
exports=...

export和export default的用法是后面直接接具体的导出，没有等号.

export ...
export default ...

当时看视频学习的过程中，跟着敲代码感觉挺顺利了，真到自己做项目的时候，爆出一大堆错误和问题，希望自己bug能越改越少，代码越来越熟练；