[Redux] Navigating with React Router <Link>

來源:互聯網
上載者:User

標籤:

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:

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

 

[Redux] Navigating with React Router <Link>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.