Untuff typeError：无法读取未定义的属性（读取＆＃x27; param＆＃x27;）

Question

它是React JS的主页组成部分，

    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>
      </>
   );
 };

其第二个组件详细信息

    export const Details = ({match}) => {
       return (
         <div>
           Details {match.param.name}  
         <div/>
       );
     };

[https://i.sstatic.net/kuyra.png] before

homepage本身看起来像这样 但是当我单击标志/卡时，它会按预期发送给我第二页，但给了我这个错误 [https://i.sstatic.net/jqehm.png] exter]

我也使用react-router-domv6 和此api https://restcountries.com/v2/all 这两个组件都在