使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置 _开发环境

一年好景君须记，最是橙黄橘绿时。这篇文章主要讲述使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置相关的知识，希望能为你提供帮助。
create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6
执行命令如下：

npm install create-react-app -g// 全局安装create-react-app，如果不想全局安装，则不要-g。可能会很慢，可以使用cnpm来安装create-react-app my-app// my-app是项目名cd my-appnpm start// 启动项目

这里按部就班来执行就行了，没啥可说的。

接下来要说的是react-router 4.x路由配置。
之前是按照react-router 4.x以下版本来配置，结果发现老报错，死活运行不出来，网上查资料一看，坑爹的，原来3.x与4.x路由配置是完全不一样的。
4.x的版本需要安装react-router-dom

准备工作：安装react-router-dom
npm install react-router-dom --save // --save 会把依赖包名称添加到 package.json 文件 dependencies 键下,运行时依赖

（1）、在src文件夹下创建components文件夹，用来存放组件。例如我的是这样的：

使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

文章图片

其中index.js是路由配置文件。

（2）、在路由配置文件index.js中依次导入要使用的组件以及路由需要使用的组件。如我的配置是这样的：

import React, { Component } from \'react\'; import ReactDOM from \'react-dom\'; import { BrowserRouter as Router, Route, Link }from \'react-router-dom\'; import \'./index.css\'; import App from \'./components/App\'; // 导入App组件 import About from \'./components/About\'; // 导入About组件 import Inbox from \'./components/Inbox\'; // 导入Inbox组件 import registerServiceWorker from \'./registerServiceWorker\'; export default class Hello extends Component{ render(){ return ( < Router> < div> < ul className="nav"> < li> < Link to="/"> App< /Link> < /li> < li> < Link to="/About"> About< /Link> < /li> < li> < Link to="/Inbox"> Inbox< /Link> < /li> < /ul> < hr /> < Route exact path="/" component={App} /> < Route path="/About" component={About} /> < Route path="/Inbox" component={Inbox} /> < /div> < /Router> ) } } ReactDOM.render(< Hello /> , document.getElementById(\'root\')); registerServiceWorker();

【使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置】其中exact是用来”/”做唯一的匹配。如果没有这个的话，在匹配其他的同时也会匹配到当前
运行效果如下：