The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Redux: Navigating with React Router <Link>

Redux: Navigating with React Router <Link>

2:38
We will learn how to change the address bar using a <Link> component from React Router.
Watch this lesson now
Avatar
egghead.io

We will learn how to change the address bar using a component from React Router.

Avatar
kcrossfitter

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?

Avatar
Brian

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

In reply to kcrossfitter
Avatar
Robert Smith

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;
In reply to Brian
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?