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 }) => (    
             
                  
               
       
          
     )export default Root;

(:filter) means: it might not exisits.

 

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

const Footer = () => (  
    Show:    {
    " "}    
      
             All    
          {
    ", "}    
      
             Active    
          {
    ", "}    
      
             Completed    
        
);

 

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

    Show:    {
    " "}    
      
             All    
          {
    ", "}    
      
             Active    
          {
    ", "}    
      
             Completed    
        

 

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} ) => (    
           {children}      );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:

//deleteexport 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.