使用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 (
            <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();

　　其中exact是用来”/”作惟一的匹配。若是没有这个的话，在匹配其余的同时也会匹配到当前

　　运行效果以下：