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

• Mohammad Khan: I think it should be export default function Navbar() capital N since you make the component in the app.js something like this <Navbar />

Answer 1

In navbar change

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

to

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