title: React Component Does Not Mount
body: <p>I am in need of some help. I'm working on a create-react-app using React-Router. The issue that I'm seeing is that when I run my app, I should be able to see individual student information when I click on their name. Instead, nothing renders.</p>
  
  <p>Here is the code for the component (students.js) that is not rendering:</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  
  export default class Student extends Component {
  constructor() {
    super();
    this.state = {
      studentInfo: {}
    }
  
  }
  
  componentDidMount(){
    console.log('fired')
    axios.get(`http://localhost:3005/students/${this.props.match.params.id}`)
    .then(res =&gt; {
      this.setState({studentInfo: res.data})
    })
    .catch(err =&gt; console.log(err))
  }
  
  render() {
    return (
      &lt;div className="box"&gt;
        &lt;h1&gt;Student:&lt;/h1&gt;
        &lt;h1&gt;{this.state.studentInfo.first_name}           
  {this.state.studentInfo.last_name}&lt;/h1&gt;
        &lt;h3&gt;Grade: {this.state.studentInfo.grade}&lt;/h3&gt;
        &lt;h3&gt;Email: {this.state.studentInfo.email}&lt;/h3&gt;
      &lt;/div&gt;
    )
  }
  }
  </code></pre>
  
  <p>I have tried a console.log in the componentDidMount method of my students.js file to see if it is mounting properly and I found that it would not fire. When I tried to check state with the React Dev Tools, I saw that there was no state.</p>
  
  <p>I have a similar component called classList.js that has a similar setup that is working properly. </p>
  
  <p>classList.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  import {Link} from 'react-router-dom';
  
  export default class ClassList extends Component {
    constructor() {
    super();
    this.state = {
      students: []
  }
  
  }
  componentDidMount(){
    axios.get(`http://localhost:3005/students?
    class=${this.props.match.params.class}`)
    .then(res =&gt; {
    this.setState({students: res.data});
    })
    .catch(err =&gt; console.log(err))}
  
  
  render() {
  const students = this.state.students.map((student,i) =&gt;
    &lt;Link key={i} to={`/student/${student.id}`}&gt;&lt;h3&gt;{student.first_name} 
  {student.last_name}&lt;/h3&gt;&lt;/Link&gt;
  )
  return (
    &lt;div className="box"&gt;
      &lt;h1&gt;{this.props.match.params.class}&lt;/h1&gt;
      &lt;h2&gt;ClassList:&lt;/h2&gt;
      {students}
    &lt;/div&gt;
  )
  }
  
  }
  </code></pre>
  
  <p>I've checked my routes and my link tags and they seem fine. </p>
  
  <p>Routes.js:</p>
  
  <pre><code>import React from 'react';
  import {Switch, Route} from 'react-router-dom';
  import Home from './components/Home/Home';
  import About from './components/About/About';
  import ClassList from './components/ClassList/ClassList';
  import Student from './components/Student/Student'
  
  export default (
    &lt;Switch&gt;
      &lt;Route exact path='/' component={Home} /&gt;
      &lt;Route path='/about' component={About} /&gt;
      &lt;Route path='/classlist/:class' component={ClassList} /&gt;
      &lt;Route path='student/:id' component={Student} /&gt;
    &lt;/Switch&gt;
  )
  </code></pre>
  
  <p>Any thoughts? Thanks!</p>