标签：
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>
标签：
原文地址：http://www.cnblogs.com/Answer1215/p/5558977.html
