React Router Error Cannot read property 'pathname' of undefined

Question

I make react router app. But I have an error. I can not identify it. I am new react developer.

My app code is:

export default function App() {
  return (
    <BrowserRouter className='bodyMy'>
      <HeardTitle />
      <Navbar />
      <Switch>
        <Route exact path="/" component={Card} />
        <Route exact path="/class" component={Card2} />
      
      </Switch>
      
      
    </BrowserRouter>
  );
}

and my navbar code:

export default function navbar() {
    return (
        <Fragment className='myNavbar'>
            <ul>
                <li >
                    <NavLink activeStyle={{ color:'green', fontWeight: "bold" }} exact to="/">Function</NavLink>
                </li>
                <li >
                    <NavLink  activeStyle={{ color:'red', fontWeight: "bold" }} exact to="/class">Class</NavLink>
                </li>
                <li >
                    <NavLink href="#pricing">Logout</NavLink>
                </li>
            </ul>
        </Fragment>
    )
}

It shows TypeError: Cannot read property 'pathname' of undefined

I think it should be export default function Navbar() capital N since you make the component in the app.js something like this <Navbar /> — Mohammad Khan
– Mohammad Khan, Commented Aug 10, 2021 at 4:43

Ahmad · Accepted Answer · 2021-08-10 06:16:04Z

1

In navbar change

<NavLink href="#pricing">Logout</NavLink>

to

<NavLink to="#pricing">Logout</NavLink>

answered Aug 10, 2021 at 6:16

Ahmad

9042 gold badges9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Router Error Cannot read property 'pathname' of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related