Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Router 4 Basics Going Further with Routing Navigating Routes Programmatically

Victor Stanciu
seal-mask
.a{fill-rule:evenodd;}techdegree
Victor Stanciu
Full Stack JavaScript Techdegree Student 11,184 Points

So how do we use withRouter after importing it?

In the Teacher's Notes, the only information is that we might need to import withRouter, but nothing more. Students should be thought when they need to import it, and how to use it.

Things like this make me give up on this outdated course and cancel the subscription

Malachi Gruenhagen
Malachi Gruenhagen
3,226 Points

I must admit I am also finding myself somewhat disappointed with how outdated Treehouse's content is. That said, I think I figured this one out after reviewing StackOverflow:

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";

class Home extends Component {
  handleSubmit = e => {
    e.preventDefault();
    let teacherName = this.name.value;
    let teacherTopic = this.topic.value;
    let path = `teachers/${teacherTopic}/${teacherName}`;
    this.props.history.push(path);
  };

  render() {
    return (
      <div className="main-content home">

        {/* a lot of other content */}

        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            placeholder="Name"
            ref={input => (this.name = input)}
          />
          <input
            type="text"
            placeholder="Topic"
            ref={input => (this.topic = input)}
          />
          <button type="submit">Go!</button>
        </form>

      </div>
    );
  }
}

export default withRouter(Home);