CODEWITHSUNDEEP
reactjsreact-router
ashwintastic
ashwintastic

Reputation: 2312

Uncaught TypeError: Cannot read property 'history' of undefined !! React router

Hi I have installed react-router-dom and I want to use <Link> from it. Below is my code 

   import { BrowserRouter, Route, Link } from 'react-router-dom'

    class UserList extends Component {

     renderList() {
        return this.props.users.map((user) => {
        return (
            <li
                key={user.id}
                onClick={() => this.props.selectUser(user)}
            >
                {user.first} {user.last}
            </li>
        );
    });
   }

   render() {
     return (
      <div>
        <Link to="/admin/"> Click Me </Link>
        <ul>
            {this.renderList()}
        </ul>
      </div>
    );
  }
}

   function mapStateToProps(state) {
     return {
       users: state.users
     };
   }

  function matchDispatchToProps(dispatch){
    return bindActionCreators({selectUser: selectUser}, dispatch);
   }


  export default connect(mapStateToProps, matchDispatchToProps)(UserList);

But getting this error

Warning: Failed context type: The context router is marked as required in Link, but its value is undefined.

Uncaught TypeError: Cannot read property 'history' of undefined

any idea !!!

Upvotes: 1

Views: 7479

Answers (1)

Yury Tarabanko
Yury Tarabanko

Reputation: 45106

Suppose you have some root component called App. You need to make its root node to be a router (say BrowserRouter) that will react on url changes and provide Link with correct router implementation via context.

// app.js
import { BrowserRouter, Route, } from 'react-router-dom'
import UserList from './path/to/UserListComponent'

class App extends Component {
  ...

  render() {
    return (
      <BrowserRouter>
        ...
        <Route path="/users" component={UserList}/>
        ...
      </BrowserRouter>
    )
  }
}

Upvotes: 4

Related Questions