react脚手架中配置静态路由、动态路由、路由项

安装相关的依赖

npm i create-react-app -g 全局安装 
create-react-app --version 查看版本 
create-react-app 项目名称
cd 项目名称 进入项目 
npm i react-router-dom -D 配置路由 
npm i react-router-config -D 配置路由项
npm start 启动
npm run eject 变成自定义配置的模式

 

配置react路由

引入：src目录->index.js文件

（静态路由）使用：src目录->App.js页面入口

（动态路由）获取路径：this.props.match

配置路由项  

在src目录下创建routers文件夹->index.js文件

 

将组件引入到index.js文件中配置路由（exach:true精准匹配组件），将router暴露出去

使用：引入react-router-config文件和刚刚配置好的routers文件夹->index.js文件

启动项目查看