I am trying to create a navbar that link to different route with React/typescript but when i create a link i keep getting an error

Question

import React from 'react'
import { Link } from 'react-router-dom'

export default function NavBar() {
  return (
    <div className='NavContainer'>
        <link to='/home'>Home</link>
        <link to='/login'>Login</link>
        <link to='/register'>Register</link>
        <link to='/profile'>Profile</link>
        <link to='/admin'>Admin</link>
        <link to='/logout'>Logout</link>
    </div>
  )
}

but i keep gettin error on the "to" that....

Type '{ children: string; to: string; }' is not assignable to type 'DetailedHTMLProps<LinkHTMLAttributes, HTMLLinkElement>'. Property 'to' does not exist on type 'DetailedHTMLProps<LinkHTMLAttributes, HTMLLinkElement>'.

Answer 1

Try to use a capital L for the link tag, like this:

<Link to='/home'>Home</Link>