We will learn how to change the address bar using a component from React Router.

In Root.js:

We need to add a param to change the Route:

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="/(:filter)" component={App}/>
</Router>
</Provider>
) export default Root;

(:filter) means: it might not exisits.

In Foot.js, displaying the filter link like this;

const Footer = () => (
<p>
Show:
{" "}
<FilterLink filter="SHOW_ALL">
All
</FilterLink>
{", "}
<FilterLink filter="SHOW_ACTIVE">
Active
</FilterLink>
{", "}
<FilterLink filter="SHOW_COMPLETED">
Completed
</FilterLink>
</p>
);

We want to change it little bit, so it would be more url friendly:

  <p>
Show:
{" "}
<FilterLink filter="all">
All
</FilterLink>
{", "}
<FilterLink filter="active">
Active
</FilterLink>
{", "}
<FilterLink filter="completed">
Completed
</FilterLink>
</p>

In the FilterLink.js:

We rewrite the code by using <Link> from 'react-router':

import React from 'react';
import { Link } from 'react-router'; const FilterLink = ( {filter, children} ) => (
<Link
to={filter === 'all' ? '' : filter}
activeStyle={{
textDecoration: 'none',
color: black
}}
>
{children}
</Link>
); export default FilterLink;

If the filter is 'all', then just use default url.

If the link is actived, then use the activeStyle.

And we can delete the action creator for setVisibilityFilter in actions.js:

//delete

export const setVisibilityFilter = (filter) => ({
type: 'SET_VISIBILITY_FILTER',
filter,
});

Aslo delete the Link.js, it is not needed anymore, we use the Link component from react-router.

[Redux] Navigating with React Router <Link>的更多相关文章

  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. [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. Inst ...

  3. [React] React Router: Router, Route, and Link

    In this lesson we'll take our first look at the most common components available to us in react-rout ...

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

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

  5. [React Router v4] Style a Link that is Active with NavLink

    We often need to be able to apply style to navigation links based on the current route. In React Rou ...

  6. [React Router v4] Use the React Router v4 Link Component for Navigation Between Routes

    If you’ve created several Routes within your application, you will also want to be able to navigate ...

  7. 关于react router 4 的小实践

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

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

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

  9. React Router API文档

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

随机推荐

  1. iOS: 学习笔记, 用代码驱动自动布局实例(swift)

    iOS自动布局是设置iOS界面的利器.本实例展示了如何使用自动布局语言设置水平布局, 垂直布局1. 创建空白iOS项目(swift)2. 添加一个控制器类, 修改YYAppDelegate.swift ...

  2. double类型字符串转换成一个纯数字字符串和一个小数点位数的c++代码

    今天工作中遇到一个要不一个double型的字符串转换成一个纯字数字符串和一个标志这个数字字符串的小数点有几位的int类型 例如:“23.123”--->“23123” + 3   比较简单.就是 ...

  3. html5中的常用的库

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera ...

  4. em(倍)与px的区别(转载)

    在国内网站中,包括三大门户,以及"引领"中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使 ...

  5. Codeforces Round #204 (Div. 2): A

    超级大水题: 只要用到一个小学用过的结论就可:能被9整除的数它的各位数相加能被9整除: 代码: #include<iostream> #define maxn 1005 using nam ...

  6. C语言头文件的使用与写法

    C语言中的.h文件和我认识由来已久,其使用方法虽不十分复杂,但我却是经过了几个月的“不懂”时期,几年的“一知半解”时期才逐渐认识清楚他的本来面目.揪其原因,我的驽钝和好学而不求甚解固然是原因之一,但另 ...

  7. Robotium solo.goBack();不起作用,解决方案

    今天碰到用solo.goBack();点击手机的返回按键五次有四次起总用.查了半天后发现以下一种替代方法: solo.sendKey(KeyEvent.KEYCODE_BACK); robotium下 ...

  8. 【转】iOS 开发怎么入门?

    原文网址:http://www.zhihu.com/question/20264108 iOS 开发怎么入门? 请问有设计模式.内存管理方面的资料吗?最好有除了官方文档之外的其它内容,10 条评论 分 ...

  9. 2015第43周一solr相关概念

    Solr是一种开放源码的.基于Lucene的搜索服务器.它易于安装和配置,而且附带了一个基于HTTP 的管理界面.   官网:http://lucene.apache.org/solr/ solr学习 ...

  10. HDU 5914 Triangle 【构造】 (2016中国大学生程序设计竞赛(长春))

    Triangle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...