[Redux] Adding React Router to the Project
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的更多相关文章
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)
请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...
- [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 ...
- 关于react router 4 的小实践
详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- React Router API文档
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- React Router V4发布
React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...
- React躬行记(13)——React Router
在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...
随机推荐
- 【开源】封装HTML5的localstorage
项目名:web-storage-cache 项目地址:https://github.com/WQTeam/web-storage-cache API说明:https://github.com/WQTe ...
- 帝国cms灵动标签调用tags
这个语法用来调用[指定分类][指定条件]的所有tags [e:loop={"select * from [!db.pre!]enewstags order by num desc limit ...
- chmod 命令
来源网址: http://www.2cto.com/os/201205/130236.html http://www.cnblogs.com/younes/archive/2009/11/20/160 ...
- html5 中的 css样式单 的 两种调用方式的区别
在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...
- JDK的帮助文档
1.JDK1.8在线api,英文版 https://docs.oracle.com/javase/8/docs/api/
- nutch-1.7 编译
转载自:http://peigang.iteye.com/blog/1563288 从nutch-.3开始 本地抓取(单击) 和 分布式抓取(集群)所使用的配置文件和命令单独分开. 资源:下载地址:h ...
- 写个自动下载安装Ant的shell脚本【二】
#!/bin/bash ####################################################### file name: install_ant.sh# # fun ...
- BZOJ 4008 亚瑟王
Description 小K不慎被LL邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑. 他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知,亚瑟王是一个看脸的游 ...
- 一步一步理解 Java 企业级应用的可扩展性
摘要:本文主要介绍如何理解 Java 应用的扩展方式以及不同类型的扩展技术和具体技巧,介绍一些有关 Java 企业级应用的一般扩展策略. 老实说,"可扩展性"是个全面且详尽的话题, ...
- Cow Contest
poj3660:http://poj.org/problem?id=3660 题意:一些奶牛之间进行编程比赛,每头牛都有一个编程能力.如果a的能力比b的能力高,则a总能打败b .现在给你一些牛之间的比 ...