CODEWITHSUNDEEP
javascriptreactjsfrontend
denis kiplangat
denis kiplangat

Reputation: 67

I get this error 'TypeError: toLocation is undefined' in my react project

I wanted to show sign In button on top of the page using NavLink in react-router-dom this is the code causing the problem

    import React, { Component } from 'react';
    import logo from '../svg/logo.svg';

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

    class Header extends Component {
        render() {
            return (
                <div className="header-container">
                    <div className="header-top">
                       <img src={logo} alt="hdfhvbdhbhbvhxbc"/>
                       <NavLink className="signIn-btn">Sign In</NavLink>
                    </div>
                </div>
            );
        }
    }

    export default Header;

if I comment out import {NavLink} from 'react-router-dom'; and <NavLink className="signIn-btn">Sign In</NavLink> The code renders as intended.

When i run it in Vsstudio it shows that it has compiled successfully . However in my browser it shows me the following message TypeError: toLocation is undefined with the following additional messages

51 |   resolveToLocation(to, currentLocation),
  52 |   currentLocation
  53 | );
> 54 | const { pathname: path } = toLocation;
     | ^  55 | // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202
  56 | const escapedPath =
  57 |   path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");

I am using firefox btw

Upvotes: 1

Views: 1013

Answers (1)

mrak
mrak

Reputation: 2906

Just check the documentation: You are missing the "to" property in the NavLink

Upvotes: 7

Related Questions