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

最新文章

热门文章