[Redux] Navigating with React Router <Link>

We'll learn 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';ConstRoot = ({store}) = = (    <provider store={store}> <router history={browserhistory}> <route path="/(: Filter) "Component={app}/> </Router> </Provider>) ExportdefaultRoot;

(: Filter) Means:it might not exisits.

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

ConstFooter = () = (  <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 is 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';ConstFilterlink = ({filter, children}) = = (    <Link to={filter = = =' All'?"': Filter} activestyle={{textdecoration:'None', Color:black}} >{Children}</Link>); ExportdefaultFilterlink;

If the filter is ' all ' and then just use the default URL.

If the link is actived and then use the Activestyle.

And we can delete the action creator for Setvisibilityfilter in Actions.js:

// Delete  const Setvisibilityfilter = (Filter) = = ( {    'set_visibility_filter  ',    Filter,});

Aslo Delete the link.js, it is not needed anymore and we use the Link component from React-router.

[Redux] Navigating with React Router <link>