react+redux+react-router4配置过程_react-redux+react-router-程序员宅基地

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

（待续）

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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python---素数相关_输出x的除1和它本身以外的因数-程序员宅基地

文章浏览阅读371次。python3.x实例1.判断质数一个大于1的自然数，除了1和它本身外，不能被其他自然数（质数）整除（2, 3, 5, 7等），换句话说就是该数除了1和它本身以外不再有其他的因数。代码：#质数判断n = int(input())if n>1: for i in range(2,n): if n%i==0: print("{}不是质数".format(n)) brak else: print("{}_输出x的除1和它本身以外的因数

2019.01.28【NOIP提高组】模拟B组 JZOJ 4235 序列-程序员宅基地

文章浏览阅读239次。惊现暴力AC题，然而没打换行少了60分

Android 底层框架笔记-程序员宅基地

文章浏览阅读895次。android底层的实现 android的apk想要获取底层的数据或者接口，要实现底层的相关服务，现对此作出记录 1,编写hal层 hal层代码主要是对驱动提供的接口进行操作，其中有open ，read，write，mmap，ioctl和sys下的一些接口的操作； hal层代码严格按照安卓的那套写法编写，

宏替换与内联函数的区别（c/c++）-程序员宅基地

文章浏览阅读339次。C/C++中宏替换与内联函数的区别：（1）宏定义define：宏定义不是函数，只是简单地把先编辑好的代码在预处理阶段替换进去，所以在替换时不会进行类型检查什么的而是在编译阶段再去检查代码的正确性；但是内联函数是真正的函数，且具有函数所具有的所有特征（2）宏定义是单纯的代码替换，所以在宏定义时需要小心优先级以及类型检查等问题，如：#define mul(N) N*Nint main(){ mul(2+2); //mul("hello"); //不会进行类型检查} 执行结果为：8因为展

LOJ#6036. 「雅礼集训 2017 Day4」编码（2-SAT）-程序员宅基地

文章浏览阅读669次。传送门题解：对于每个串，在Trie树上找到他’?’处填0或者1的位置。那么他的子树中（不包括他）的所有串不能选。对于他这个节点我们记录一个前缀后缀就可以做到O(n)O(n)O(n)了。#include <bits/stdc++.h>using namespace std;const int N=1e6+50;typedef pair <int,int&..._「雅礼集训 2017 day4」编码

Struts2远程代码执行漏洞检测的原理和代码级实现-程序员宅基地

文章浏览阅读4k次。想必最近很火的Struts2漏洞大家应该有所耳闻吧，如果你没听说也没关系，关于这个漏洞的描述可以用一句话总结：漏洞很普遍，后果很严重。由于JavaEE的应用普遍偏向于使用SSH框架（Spring+Struts+Hibernate）开发，而且存在漏洞的Struts 所有主流的Java中间件服务器都可能受到该漏洞的影响，特别是大家喜欢的Tomcat，问题尤为严重，倒不是因为Tomcat上Strut