React Router - Cannot read property 'history' of undefined

react-router "cannot read property" of undefined
react router cannot read property object of undefined
react router-dom
typeerror cannot read property 'location' of undefined reactjs
react router history
cannot read property 'location' of undefined javascript
cannot read property 'location' of undefined uselocation
cannot read property 'location' of null

I am building a styleguide app. I have two dropdown components where a user can choose both a brand and a component - the app will then display the chosen component branded according to the selected brand. I want both of these options to be included in the URL.

The two dropdown's that are programatically changing the route. I am getting the error TypeError: Cannot read property 'history' of undefined whenever the user interacts with either dropdown.

I have a component being rendered by a route :

<Route path="/:brand/:component"
render={props => <DisplayComponent {...props} />} />

That component has two event handlers for two dropdown component that let the user select the root:

  handleComponentPick(event: any) {
    const component = event.target.value;
    this.props.history.push(`/${this.props.match.params.brand}/${component}`);
  }

  handleBrandChange = (event: any) => {
    if (event.target instanceof HTMLElement) {
      const brand = event.target.value;
      this.props.history.push(`/${brand}/${this.props.match.params.component}`);
    }
  };
  render = () => {
    return (
      <div className={"constrain-width-wide center "}>
        <ThemePicker
          component={this.props.match.params.component}
          brand={this.props.match.params.brand}
          handleBrandChange={this.handleBrandChange}
          handleComponentPick={this.handleComponentPick}
        />
        <div className="currently-selected-component" />
        <Route path="/:brand/button" component={Button} />
        <Route path="/:brand/card" component={Card} />
      </div>
    );
  };
}

I am wrapping the whole app in the Router.

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);```

Can you try these following changes handleComponentPick(event: any) { to handleComponentPick = (event: any) => { then render = () => { to render() { Hope this works.

TypeError: Cannot read property 'location' of undefined � Issue , TypeError: Cannot read property 'location' of undefined #5365. Closed If you're using the Router from react-router (not a BrowserRouter or� EDIT. Resolved this - the component wrapped in withRouter needed to be a child of <BrowserRouter>, not the parent of <BrowserRouter>. ReactTraining deleted a comment from mreorhan on Feb 12, 2018. ReactTraining locked and limited conversation to collaborators on Feb 12, 2018.

you have to pass the history like

  <Router history={browserHistory} routes={routes} />,

that way, you can use history with props to navigate.

font: https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md

try to use browserHistory on you app.js, like

render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route path='features' component={Features} />
    </Route>
  </Router>,
  document.getElementById('app')
)

that way, you are passing history for all of your another router.

react router v^4.0.0 Uncaught TypeError: Cannot read property , You're doing a few things wrong. First, browserHistory isn't a thing in V4, so you can remove that. Second, you're importing everything from� My React-router version is 5.1.2. My React is at version 16.10.1. You can find my code at the bottom. Yet when I import the new useHistory from react-router, I get this error: Uncaught TypeError: Cannot read property 'history' of undefined. which is caused by this line in React-router

We need to pass history as a prop to Router. I am expecting that you are using react router v4 aka react-router-dom.

import { createBrowserHistory } from "history";
import { Router } from "react-router-dom";


const history = createBrowserHistory();

    ... 

<Router history={history}>
     <Routes />
</Router>

Demo : https://codesandbox.io/s/yv5y905ojv

Cannot read property 'location' of undefined, Check the version of react-router-dom in package.json. If its version is greater than 4 then in your file import BrowserRouter :- import { BrowserRouter as Router, Route } from 'react-router-dom' else if its version is less than 4 then import Router :- import { Router, Route } from 'react-router-dom' Cannot read property 'params' of undefined The render function receives a bunch of props from react-router, and all of them need to be passed further down. So

Spied on the useHistory() hook and provided the mock route data.

import routeData from 'react-router';

describe('<Component /> container tests', () => {

  beforeEach(() => {
    const mockHistory = {
      pathname: '/dashboard'
    };
    jest.spyOn(routeData, 'useHistory').mockReturnValue(mockHistory);
  });

TypeError: Cannot read property 'location' of undefined : LearnReact, hi, im new to react programming im having this problem where i cant use the uselocation() TypeError: Cannot read property 'location' of undefined import { BrowserRouter as Router,Switch,Route, useLocation} from 'react-router-dom'; Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

If you are getting this error inside a test using jest, you need to wrap your componen within a router. I am using react-testing-library, so my logic looks as follows:

import { render, cleanup } from '@testing-library/react'
import { BrowserRouter as Router } from 'react-router-dom'
import YourComponent from '../path/to/YourComponent'

// ...
describe('YourComponent component', () => {
  afterEach(cleanup)
  it('matches snapshot', () => {
    const { asFragment } = render(
      // The following will solve this issue
      <Router>
        <YourComponent />
      </Router>
    )
    expect(asFragment()).toMatchSnapshot()
  })
})

Routing with React Router v4.0 – TA Digital Labs, Uncaught TypeError: Cannot read property 'location' of undefined at new Router. Why are these problems caused ? These problems are caused� Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

TypeError: Cannot read property 'push' of undefined, import React, { Component } from 'react'; import { BrowserRouter as Router, Switch, Route, browserHistory } from 'react-router-dom' import� React Router: Cannot read property 'pathname' of undefined . Posted by: admin December 18, 2017 Leave a comment. Questions: I’ve just started learning React and got

Cannot read property 'location' of undefined in React Router example, react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined. I've been having some trouble with react router (i'm using version^4.0. 0). Version 4.0.0-beta.3 Steps to reproduce Use NavLink component in your code. Expected Behavior Works as expected, without any errors. Actual Behavior I get the following error: TypeError: Cannot read property 'location' of undefined NavLi

TypeError: Cannot read property 'setState' of undefined, Cannot read property 'location' of undefined in React Router example - reactjs. This is a very cutting edge thing and I'm sure that tutorials like "React for beginners" or "React Router for noobs" are going to pop all over the web in a few months making this more accessible to beginners. TBH, it took me 2 days to understand the usage and migrate a full production app from react-router v2 to react-router v4. And I don't

Comments
  • please check what is this referring to inside handleComponentPick method.. You might need to bind it in the constructor first.
  • handleComponentPick doesn't seem to be bound to the class context
  • @ShubhamKhatri, yup, stackoverflow.com/questions/54982008/… this should fix it. Cause it doesnt find the props itself.