[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页面. 在传统的前端 ...
随机推荐
- jquery 学习日记之选择器
看完Jquery选择器的教程视频后,对jquery的选择器有一定的认识和了解,现整理一下知识: 一.jquery基本选择器,这类比较简单,一笔带过. #id 选择器,是选择 匹配id值中的第一个元素 ...
- 【python】由一个小例子看出python的灵活性,IF ELSE一例
temp = input("请输入1到100之间的数字:") num = int(temp) if 1 <= num <= 100: ...
- Asp.net MVC中三大描述对象之ActionDescriptor 以及继承类ReflectedControllerDescriptor
ActionDescriptor抽象类中几个基本的属性: ControllerName:被描述的Controller名称,去除后缀Controller的名称.例如:HomeController则为Ho ...
- bzoj2011: [Ceoi2010]Mp3 Player
Description Georg有个MP3 Player,没有任何操作T秒钟就会锁定,这时按下任意一个键就会变回没锁定的状态,但不会改变频道.只有在没锁定的状态下按键才有可能改变频道. MP3的频道 ...
- Quartz1.8.5例子(二)
/* * Copyright 2005 - 2009 Terracotta, Inc. * * Licensed under the Apache License, Version 2.0 (the ...
- CTSC2015&APIO2015滚粗记
CTSC 这次CTSC的考试,觉得还是考出了自己该有的水平.虽然自己最后还是没有得到金牌,但是我觉得自己尽力了,也没有什么太大的遗憾.比起省选,自己在应试的方面又有了很大的进步. Day1是我主要捞分 ...
- 【uva11374】Airport Express 最短路
题意: 在Iokh市中,机场快线是市民从市内去机场的首选交通工具.机场快线分为经济线和商业线两种,线路,速度和价钱都不同.你有一张商业线车票,可以坐一站商业线,而其他时候只能乘坐经济线.假设换乘时间忽 ...
- keil采用C语言模块化编程时全局变量、结构体的定义、声明以及头文件包含的处理方法
以前写单片机程序时总是把所用函数和变量都写在一个c文件里,后来遇到大点的项目,程序动则几千行,这种方式无疑会带来N多麻烦,相信大家都有所体验吧! 后来学会了在keil里进行模块化编程,即只把功能相同或 ...
- lc面试准备:Remove Duplicates from Sorted List II
1 题目 Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct ...
- EAFP和LBYL 两种防御性编程风格
EAFP:Easier to ask for forgiveness than permission 获得事后原理总是比事先得到许可要容易的多. 这个EAFP在python中表现的比较多.EAFP,T ...