Sometimes, we want to fix the “React-router TypeError: _this.props.history is undefined” error with React Router.

In this article, we’ll look at how to fix the “React-router TypeError: _this.props.history is undefined” error with React Router.

How to fix the “React-router TypeError: _this.props.history is undefined” error with React Router?

To fix the “React-router TypeError: _this.props.history is undefined” error with React Router, we wrap our route components with the BrowserRouter component.

For instance, we write

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import { BrowserRouter, Route } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>,
  document.getElementById("root")
);

to wrap BrowserRouter around the Router we have to make this.props.history available in App.

We should also call withRouter with App before exporting App to inject other React Router properties as props into App.

Conclusion

To fix the “React-router TypeError: _this.props.history is undefined” error with React Router, we wrap our route components with the BrowserRouter component.