Uncaught TypeError: Cannot read properties of undefined (reading 'params') while using axios and react-router-dom

Question

It's the HomePage component of ReactJS

  import React from 'react';
  import axios from 'axios';
  import { useState, useEffect } from 'react';
  import { useNavigate,useParams } from 'react-router-dom';
  import { Main } from '../components/Main';
  import { Controls } from '../components/Controls';
  import { ALL_COUNTRIES } from '../config';
  import { List } from '../components/List';
  import { Card } from '../components/Card';
  import { Details } from './Details';

  export const HomePage = () => {
     const [countries,setCountries] = useState([]);
     const  navigate = useNavigate();

 useEffect(() => {
 axios.get(ALL_COUNTRIES).then(({data})=>setCountries(data))
 },[]);

  return (
     <>
     <Controls/>
     <List>
       {
       countries.map((c) => {
        const countryInfo = {
          img: c.flags.png,
          name: c.name,
          info: [
            {
              title:'Population',
              description:c.population.toLocaleString(),
            },
            {
              title:'Region',
              description:c.region,
            },
            {
              title:'Flag',
              description:c.capital,
            },
          ],
        };
        return (
          <Card
            key={c.name}
            onClick={(e) => {
              navigate('/country/${c.name}');
            }} 
            {...countryInfo}
          />
        )
      })
     }
    </List>
  </>
  );
 };

It's second components Details

  import React from 'react';
  import { useParams } from 'react-router-dom';
  export const Details = ({match,params}) => {
   const { name } = useParams();
    return (
       <div>
         Details {match.params.name}  
       </div>
      );
     };

config.js

 const BASE_URL = 'https://restcountries.com/v2/';
 export const ALL_COUNTRIES=BASE_URL+"all?fields=name,flags,population,capital,region";
 export const searchByContry=(name)=>BASE_URL+'name/'+name;
 export const filterByCode=(code)=>BASE_URL+'alpha?code'+code.join('');

APP.jsx

 import React from 'react';
 import ReactDOM from 'react-dom';
 import axios from 'axios';
 import { Route,Routes,Router,useParams} from 'react-router-dom';
 import {useState, useEffect} from 'react';
 import './App.css';
 import styled from 'styled-components';
 import Header from './components/Header';
 import { Main } from './components/Main';
 import {NotFound} from './pages/NotFound';
 import { HomePage } from './pages/HomePage';
 import { Details } from './pages/Details';
 function App() {

   return (
     <> 
       <Header/>
       <Main>
        <Routes>
        <Route path="/" element={<HomePage/>}/>
        <Route path="country/:name" element={<Details/>}/>
        <Route path="*" element={<NotFound/>}/>
      </Routes>
    </Main>
  </>
 );
 }

 export default App;

HomePage itself looks like this but when I click on flag/card it sends me on second page as expected but gives me this error [2]:https://i.sstatic.net/39HEw.png Also, I'm using react-router-domV6 and Axios and this API https://restcountries.com/v2/all also both Components are in APP.js

Answer 1

Details is trying to read params from an undefined object, props.match in this case.

<Route path="country/:name" element={<Details />} /> // <-- no props passed!

...

import React from 'react';
import { useParams } from 'react-router-dom';

export const Details = ({ match, params }) => { // <-- match undefined
  const { name } = useParams();
  return (
    <div>
      Details {match.params.name} // <-- Oops, can't read params of undefined
    </div>
  );
};

Remove the props and access the values returned from the useParams hook.

import React from 'react';
import { useParams } from 'react-router-dom';

export const Details = () => {
  const { name } = useParams();
  return (
    <div>
      Details {name}
    </div>
  );
};

The target path is also malformed. The code navigate('/country/${c.name}') is navigating to the string literal "/country/${c.name}", which is likely not what you meant to do. Fix this to use a string template literal instead to inject the c.name value into the target path.

navigate(`/country/${c.name}`) // note the backticks instead of single quotes

I oftentimes find it useful/helpful to use the generatePath utility function to create path values.

Example:

import { generatePath, useNavigate } from 'react-router-dom';

...

const path = generatePath("/country/:name", { name: c.name });
navigate(path);