08 React+Ant Design学习（二）——路由配置

路由配置流程：

 

 

具体操作流程

      1 打开计算机命令行工具，输入命令“npm install react-router --save-dev”安装路由包，如果出现下图所示信息，则说明安装失败：

解决方法：

      出现此问题的原因主要是我没有定位到项目文件夹导致。通过定位到项目文件夹安装路由模块可解决上述问题。

     

但是，在安装过程中可能还会报错，或者安装好了，但是如果你之前安装了antd模块，他会将你antd目录下的文件删除，导致你的项目无法运行。比如我就出现此问题。

这是因为我之前已经安装了antd模块，此模块是使用yarn来安装的，通过查找资料发现它和npm安装方式冲突。所以当我们在项目文件夹中如果先安装antd模块，后安装路由模块时很可能会导致整个项目瘫痪。

解决方法：

      既然安装路由模块后它将antd内的内容删除了，那我们在安装好路由模块后再安装一次antd模块，这是即可解决上述问题。当然这是紧急救场做法，更为稳妥的方法我还在继续寻找中。

      2 在项目文件中引用：

      3 根据参考网址中的示例修改自己的代码（“https://reacttraining.com/react-router/web/example/basic”），在此我们实现的功能是：点击左侧面板的菜单，右侧content面板内的内容会发生相应变换。下面是具体的操作步骤：

      3.1 在左侧菜单栏代码和右侧面板代码中通过标签和来实现两标签的连接，如下：

      左侧菜单栏代码：

      右侧面板代码：

      3.2 在此js文件夹顶部分别引入配置了路由的各个组件，如下：

      项目对应的目录树：

      上面的菜单栏代码、面板代码其实都是在Navi.js文件中写的，此文件就是根组件文件，它里面有整个系统主界面的布局代码，它通过配置路由分别调用home、resources、news、……一系列组件来完整整个系统界面的搭建和切换。

      在此处最主要的一点就是这个home组件，它的路由配置就是“/”，没有明确写在代码中的路径，这样的话它在页面初始化的时候会加载，当我们点击“首页”菜单的时候它也会加载切换。

      3.3 各个组件的大致写法类似于下图所示：

      4 最后的效果如下图所示：