CODEWITHSUNDEEP
javascriptreactjsreact-router
troglodyte07
troglodyte07

Reputation: 4066

react-router link router.createHref is not a function error

I am creating a header which shows sign in / sign up link if the user is not already signed in or a sign out link if a user is already signed in

Here is my header component:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';

class Header extends Component {
  renderLinks() {
    if(this.props.authenticated) {
      return (
        <li className="nav-item">
          <Link to="/signout" className="nav-link">Sign Out</Link>
        </li>
      );
    }
    else {
      return (
        [
          <li className="nav-item">
            <Link to="/signin" className="nav-link">Sign In</Link>
          </li>,
          <li className="nav-item">
            <Link to="/signup" className="nav-link">Sign Up</Link>
          </li>     
        ]
      );
    }
  }

  render () {
    return (
      <nav className="navbar navbar-light">
        <Link to="/" className="navbar-brand">Redux Auth</Link>
        <ul className="nav navbar-nav">
            {this.renderLinks()}
        </ul>
      </nav>
    );
  }
}

const mapStateToProps = (state) => {
  return { authenticated: state.auth.authenticated };
}

export default connect(mapStateToProps)(Header);

I am getting the following error in the browser

Warning: Failed Context Types: Required context router.push was not specified in Link. Check the render method of Header.

Uncaught TypeError: router.createHref is not a function

I am using react router version 2.0.1

Why am I facing this issue? What does this error mean?

Upvotes: 0

Views: 4998

Answers (1)

Surya Purohit
Surya Purohit

Reputation: 1120

react-router does not provide Link, you need to use react-router-dom for this.

Replace

import { Link } from 'react-router';

with

import { Link } from 'react-router-dom';

That'll work for you.

Upvotes: 1

Related Questions