Redux: Navigating with React Router <Link>

Dan, thanks for the great course!

I'm following this course with create-react-app cli. Before this lesson, everything was fine! But with react-router version 3.0.2 it's not working, I couldn't re-select 'All' filter. So I uninstalled react-router 3.0.2 and re-installed version 2.4.0 as in the original package.json. It works but throws a lot of warning saying

Warning: You are manually calling a React.PropTypes validation function for the path prop on Route. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.

I changed to version 2.8.1. Then it's perfectly fine. Could you explain what part of the code need to be modified to use react-router version 3?

+1 I've run into the same hiccup with the Link not routing to the index/'all' filter when passed an empty string (also using v3.0.2). Clicking 'All' yields no response. Flawless course otherwise; excellent explanations! Thank you, Dan.

For React Router v3 you need to use the IndexLink component as it's to prop equals the root path. https://github.com/ReactTraining/react-router/blob/v3/docs/guides/IndexRoutes.md#index-links

This is the code I went with in this instance:

import React from 'react';
import { Link, IndexLink } from 'react-router';

const FilterLink = ({ filter, children }) => {
  const style = {
    textDecoration: 'none',
    color: 'black',
  };

  return filter === 'all'
    ? <IndexLink to="/" activeStyle={style}>{children}</IndexLink>
    : <Link to={filter} activeStyle={style}>{children}</Link>;
};

export default FilterLink;

How does the application know which todo's to render when the getVisibleTodos reducer in VisibleTodoList.js still has values with actions: SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE yet in footer.js we're passing filter params of all, completed, and active to <FilterLink filter=<all,completed,active>...., there seems to be some kind of disconnect here?

For React Router v4 I have the following:

const FilterLink = ({filter, children}) => (
    <NavLink
        exact
        to={filter === 'all' ? '' : '/' + filter}
        activeStyle={{
            textDecoration: 'none',
            color: 'black'
        }}>
        {children}
    </NavLink>
);

Not sure if that's correct but it does what the video does.

For Router v4, see this:

https://stackoverflow.com/questions/35604617/react-router-with-optional-path-parameter

Also:

Root.js

import React from 'react';
import { Provider } from 'react-redux';
import { browserHistory } from 'react-router';
import { BrowserRouter, Route } from 'react-router-dom';
import App from './App';

const Root = ({store}) => (
    <Provider store={store}>
        <BrowserRouter history={browserHistory}>
            <Route path='/:filter?' component={App} />
        </BrowserRouter>
    </Provider>
);

export default Root;

FilterLink.js

import React, { PropTypes } from 'react';
import { NavLink } from 'react-router-dom';

const FilterLink = ({ filter, children }) => (
  <NavLink
    to={filter === 'all' ? '' : '/' + filter}
    activeStyle={{
      textDecoration: 'none',
      color: 'black',
    }}
  >
    {children}
  </NavLink>
);

FilterLink.propTypes = {
  filter: PropTypes.oneOf(['all', 'completed', 'active']).isRequired,
  children: PropTypes.node.isRequired,
};

export default FilterLink;

How does the application know which todo's to render when the getVisibleTodos reducer in VisibleTodoList.js still has values with actions: SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE yet in footer.js we're passing filter params of all, completed, and active to <FilterLink filter=<all,completed,active>...., there seems to be some kind of disconnect here?

That's covered in the next video.