Cory House () - October 31, 2022 at 7:39 AM
TypeScript tip: Sometimes a type's name conflicts with an existing identifier.
When this happens, I alias the type's name:
import { Link as LinkType } from "./types";
import { Link } from "react-router-dom"; // Aliasing Link type to avoid conflict with React Router's Link import { Link as LinkType } from "./types/Link.types"; type NavProps = { links: LinkType[]; }; export default function Nav({ links }: NavProps) { return ( <nav> <ul> {links.map((link) => ( <li key={link.id}> <Link to={link.url}>{link.text}</Link> </li> ))} </ul> </nav> ); }