使用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-app npm 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文件夹，用来存放组件。例如我的是这样的： 　　　　　　　　 　　　　其中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 (

　　　　　　
• App
　　　　　　
• About
　　　　　　
• Inbox
　　 　　　　

---

) } } ReactDOM.render(, document.getElementById('root')); registerServiceWorker(); 　　其中exact是用来”/”做唯一的匹配。如果没有这个的话，在匹配其他的同时也会匹配到当前 　　运行效果如下：

 

 

https://www.cnblogs.com/jf-67/p/9065854.html