We will learn how to add React Router to a Redux project and make it render our root component.

Install:

npm install --save react-router
import React from 'react';
import {Provider} from 'react-redux';
import {Router, Route} from 'react-router';
import App from './App'; const Root = ({ store }) => (
<Provider store={store}>
<Router>
<Route path="/" component={App}/>
</Router>
</Provider>
) export default Root;

Router should be wrapped inside Provider, then all the children components can access the router.

Currentlly when we open the browser, we saw the url is like:

http://localhost:3000/#/?_k=k4ctzs

To fix this need to import 'browserHistry':

import React from 'react';
import {Provider} from 'react-redux';
import {Router, Route, browserHistory } from 'react-router';
import App from './App'; const Root = ({ store }) => (
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}/>
</Router>
</Provider>
) export default Root;

[Redux] Adding React Router to the Project的更多相关文章

  1. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  2. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  3. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  4. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

  5. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

  6. React Router API文档

    React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

  7. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  8. React Router V4发布

    React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...

  9. React躬行记(13)——React Router

    在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...

随机推荐

  1. 【开源】封装HTML5的localstorage

    项目名:web-storage-cache 项目地址:https://github.com/WQTeam/web-storage-cache API说明:https://github.com/WQTe ...

  2. 帝国cms灵动标签调用tags

    这个语法用来调用[指定分类][指定条件]的所有tags [e:loop={"select * from [!db.pre!]enewstags order by num desc limit ...

  3. chmod 命令

    来源网址: http://www.2cto.com/os/201205/130236.html http://www.cnblogs.com/younes/archive/2009/11/20/160 ...

  4. html5 中的 css样式单 的 两种调用方式的区别

    在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...

  5. JDK的帮助文档

    1.JDK1.8在线api,英文版 https://docs.oracle.com/javase/8/docs/api/

  6. nutch-1.7 编译

    转载自:http://peigang.iteye.com/blog/1563288 从nutch-.3开始 本地抓取(单击) 和 分布式抓取(集群)所使用的配置文件和命令单独分开. 资源:下载地址:h ...

  7. 写个自动下载安装Ant的shell脚本【二】

    #!/bin/bash ####################################################### file name: install_ant.sh# # fun ...

  8. BZOJ 4008 亚瑟王

    Description 小K不慎被LL邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑. 他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知,亚瑟王是一个看脸的游 ...

  9. 一步一步理解 Java 企业级应用的可扩展性

    摘要:本文主要介绍如何理解 Java 应用的扩展方式以及不同类型的扩展技术和具体技巧,介绍一些有关 Java 企业级应用的一般扩展策略. 老实说,"可扩展性"是个全面且详尽的话题, ...

  10. Cow Contest

    poj3660:http://poj.org/problem?id=3660 题意:一些奶牛之间进行编程比赛,每头牛都有一个编程能力.如果a的能力比b的能力高,则a总能打败b .现在给你一些牛之间的比 ...