React rendering both components on partial route match

Question

I am currently getting started with react and have two routes defined as such:

<Route path='/articles' component={ArticlesIndex} />
<Route path='/articles/create' component={ArticlesCreate} />

When visiting /articles , only my ArticlesIndex component is rendered as I'd expect. However, when navigating to /articles/create , both my ArticlesIndex and ArticlesCreate components are both being rendered on the page despite my ArticlesCreate component having no reference to ArticlesIndex . It seems as though the react router is rendering the ArticlesIndex component due to the route being contained in articles/create .

How can I overcome this?

For completeness' sake, Here are my two components:

ArticlesIndex component:

import React, { Component } from 'react'

export class ArticlesIndex extends Component {
  displayName = ArticlesIndex.name

  constructor(props) {
    super(props)
    this.state = { articles: [], loading: true }

    fetch('https://localhost:44360/api/Articles/')
      .then(response => response.json())
      .then(data => {
        this.setState({ articles: data, loading: false })
      })
  }

  static renderArticlesTable(articles) {
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          {articles.map(article => (
            <tr key={article.id}>
              <td>{article.id}</td>
              <td>{article.title}</td>
              <td>{article.description}</td>
            </tr>
          ))}
        </tbody>
      </table>
    )
  }

  render() {
    let contents = this.state.loading ? (
      <p>
        <em>Loading...</em>
      </p>
    ) : (
      ArticlesIndex.renderArticlesTable(this.state.articles)
    )

    return (
      <div>
        <h1>Articles</h1>
        {contents}
      </div>
    )
  }
}

and ArticlesCreate component:

import React, { Component } from 'react'

export class ArticlesCreate extends Component {
  displayName = ArticlesCreate.name

  constructor(props) {
    super(props)
    this.state = {
      title: '',
      description: '',
    }

    this.handleSubmit = this.handleSubmit.bind(this)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group row">
          <label className=" control-label col-md-12" htmlFor="Title">
            Title
          </label>
          <div className="col-md-4">
            <input
              className="form-control"
              type="text"
              name="title"
              defaultValue={this.state.title}
              required
            />
          </div>
        </div>
        <div className="form-group row">
          <label className=" control-label col-md-12" htmlFor="Description">
            Description
          </label>
          <div className="col-md-4">
            <input
              className="form-control"
              type="text"
              name="description"
              defaultValue={this.state.description}
              required
            />
          </div>
        </div>
        <div className="form-group">
          <button type="submit" className="btn btn-default">
            Save
          </button>
        </div>
      </form>
    )
  }

  handleSubmit(event) {
    event.preventDefault()
    const data = new FormData(event.target)

    // POST request for Add employee.
    fetch('https://localhost:44360/api/Articles/', {
      method: 'POST',
      body: data,
    })
      .then(response => response.json())
      .then(responseJson => {
        this.props.history.push('/articles')
      })
  }
}

Answer 1

You forgot to add the exact props on your <Route /> and the url /articles/create is matching both routes.

When exact={true} or exact is passed into <Route/> props the Route will be rendering the component if the location.pathname match exactly you path .

<Route exact={true} path='/articles' component={ArticlesIndex} />
<Route path='/articles/create' component={ArticlesCreate} />