react+redux+react-router4配置过程

1）创建react单页面应用

npm install -g create-react-appcreate-react-app my-app

2）安装redux

npm install --save reduxnpm install --save react-redux

3)安装react-router，现在用的是版本4，和之前的用法和配置方法都有所区别。

npm install --save historynpm install --save react-router-domnpm install --save react-router-redux

4）安装类型检测库prop-types

npm install --save prop-types

现在package.json长这样：

{  "name": "myrouter",  "version": "0.1.0",  "private": true,  "dependencies": {    "history": "^4.7.2",    "prop-types": "^15.5.10",    "react": "^15.6.1",    "react-dom": "^15.6.1",    "react-redux": "^5.0.6",    "react-router-dom": "^4.2.2",    "react-router-redux": "^5.0.0-alpha.6",    "react-scripts": "1.0.13",    "redux": "^3.7.2"  },  "scripts": {    "start": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test --env=jsdom",    "eject": "react-scripts eject"  }}

index.js长这样：

import React, { Component } from 'react';import ReactDOM from 'react-dom';import { createStore} from 'redux';import { Provider } from 'react-redux';import createHistory from 'history/createBrowserHistory';import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';import {BrowserRouter as Router, Route, Link,Switch} from 'react-router-dom';import reducers from './store/store' // 存放reducers的文件//样式文件import './index.css';//组件import App from './App';import registerServiceWorker from './registerServiceWorker';import About from './dontknow/About'import Inbox from './dontknow/Inbox'import InboxChild from './dontknow/InboxChild'const history = createHistory();const store = createStore(reducers);ReactDOM.render(    <Provider store={store}>        { /* ConnectedRouter will use the store from Provider automatically */ }        <ConnectedRouter history={history}>            <div>                <Switch>                    <Route exact path="/" component={App}/>                    <Route path="/about" component={About}/>                    <Switch>                        <Route exact path="/inbox" component={Inbox}/>                        <Route path="/inbox/react/:id" component={InboxChild}/>                    </Switch>                </Switch>            </div>        </ConnectedRouter>    </Provider>,    document.getElementById('root'));registerServiceWorker();

（待续）