You can also use withRouter from import { withRouter } from "react-router"; and inject your component. You can get history as a props and use history.push() for navigate route.

Example:

import React from "react";
import { withRouter } from "react-router";

class ShowTheLocation extends React.Component {
  nextBtn = () => {
    const { history } = this.props;

    history.push("/display");
  };

  render() {
    return (
      <Link to="display">
        <button onClick={this.nextBtn} className="nextBtn">
          Submit
        </button>
      </Link>
    );
  }
}

export default withRouter(ShowTheLocation);

You can also try this. It's works for me

import { browserHistory } from 'react-router';
    class MyClass extends Component {
        nextBtn = () => {
           browserHistory.push('/display');
        }
    }

You can route to another page using several methods. First, in your case, you are using a Link. But your route name passing is wrong. You have to pass the route name in front like this:

        <Link to={'/display'}> 
        // display should be a routes name
         <button className="nextBtn">
         Submit
         </button>
         </Link>

https://reactrouter.com/web/api/Link.

You can read more about it here:

Secocnd method:
Use react-router-dom package to define the routing and then use one of below mentioned ways on onClick event of button.

  1. this.props.history.push("componentpath").
  2. browserHistory object (in react-router package).

Also check this question solutions... how to navigate from one page to another in react js?