Lost location.pathname

Hello,

I'm a beginner in ReactJS.
I make a component for my menu like this :

import React from 'react'
import {NavLink,useLocation} from 'react-router-dom'


export default function Navigation() {
        //For active link
        const location = useLocation()
        const getNavLinkClass = (path) => {
          return location.pathname === path ? 'active' : '';
        }

return (
...<li className={getNavLinkClass("/page")}> <NavLink  to={page.slug}>{page.title}</NavLink></li>...

It's work fine, but i need to call Api to get Pages, i do that :

import React,{useState,useEffect} from 'react'
import {NavLink,useLocation} from 'react-router-dom'
import axios from 'axios'

export default function Navigation() {

        const [data,setData] = useState([])

        //For Active
        const location = useLocation()
        const getNavLinkClass = (path) => {
                    return loc.pathname === path ? 'active' : '';
        }


        useEffect(() => {

            const fetchData = async () => {
                const result = await axios.get('http://localhost:5000/menu')

                setData(result.data)
            }
            fetchData()
        },[])


        return (
...<li className={getNavLinkClass("/page")}> <NavLink  to={page.slug}>{page.title}</NavLink></li>...

I have this error :
TypeError: Cannot read properties of undefined (reading 'pathname')

I don't understand.

Thaks for help

Comments

[Frédéric Speter]

ok,
the problem is from à NavLink without "TO" property ...