react+redux+react-router4配置过程

最新推荐文章于 2020-12-22 22:18:02 发布

面具哥布林

最新推荐文章于 2020-12-22 22:18:02 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/oak160/article/details/77935901

版权

1）创建react单页面应用

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

2）安装redux

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

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

npm install --save history
npm install --save react-router-dom
npm 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();