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

Redux: Using withRouter() to Inject the Params into Connected Components

Redux: Using withRouter() to Inject the Params into Connected Components

2:58
We will learn how to use withRouter() to inject params provided by React Router into connected components deep in the tree without passing them down all the way down as props.
Watch this lesson now
Avatar
egghead.io

We will learn how to use withRouter() to inject params provided by React Router into connected components deep in the tree without passing them down all the way down as props.

Avatar
-kaik-

Hi!

I get an error retrieving filter params on the end component (props.params is null), as if "withRouter" was not working at all (however, props have a "router" property).

I'm getting same error with cloned code from your repo :(

Avatar
-kaik-

I've seen that the issue was related with the version of react-router.

However, trying to update package.json to use "react-router": "^3.0.0", throw an error with npm install.

I've solved it by using (in package.json) the last version available: "react-router": "^3.0.0-alpha.1"

In reply to -kaik-
Avatar
Vicent Gozalbes

Hello,
is it possible to use withRouter and retrieve the filter param without using connect? f.e here is how my code looks like:

import React, { Component, PropTypes } from 'react';
import { withRouter } from 'react-router';
import { toggleTodo } from '../actions';
import TodoList from './TodoList';

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'completed':
      return todos.filter(t => t.completed);
    case 'active':
      return todos.filter(t => !t.completed);
    default:
      return todos;
  }
};

class VisibleTodoList extends Component {
  componentDidMount() {
    const { store } = this.context;
    this.unsubscribe = store.subscribe(() =>
      this.forceUpdate()
    );
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { store } = this.context;
    const state = store.getState();

    // how can I access to `filter` router param?

    return (
      <TodoList
        todos={getVisibleTodos(
          state.todos,
          filter
        )}
        onTodoClick={id =>
          store.dispatch(toggleTodo(id))
        }
      />
    );
  }
}

VisibleTodoList.contextTypes = {
  store: React.PropTypes.object,
};

export default withRouter(VisibleTodoList);

Thanks!

Avatar
mobility-team

Thank you! The v4.0.0-alpha.3 should also work

In reply to -kaik-
Avatar
kcrossfitter

As indicated in the video, to use withRouter(), I have to use react-router version 3.0 or higher.

But there is a problem.
- version 3.0.0 => No problem
- version 3.0.1 => After selecting 'completed' or 'active', I cannot select 'all' again.
- version 3.0.2 => After selecting 'completed' or 'active', I cannot select 'all' again.

Is this a bug in 3.0.1 or 3.0.2. How can I solve this issue?

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?