1. 6
    Redux: Navigating with React Router <Link>
    2m 38s

Redux: Navigating with React Router <Link>

Dan Abramov
InstructorDan Abramov

Share this video with your friends

Send Tweet

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

kcrossfitter
kcrossfitter
~ 4 years ago

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?

Brian
Brian
~ 4 years ago

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

Robert Smith
Robert Smith
~ 4 years ago

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;
Andre
Andre
~ 4 years ago

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?

Nino Harris
Nino Harris
~ 3 years ago
Sean Cooper
Sean Cooper
~ 3 years ago

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.

Sean Cooper
Sean Cooper
~ 3 years ago
Alex Okros
Alex Okros
~ 3 years ago

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;
J. Matthew
J. Matthew
~ 2 years ago

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.