No display on screen after Routing

Question

I'm trying to create a route for my page, I used REACT + TAILWIND bootstrap with vite.So I tried creating a link in my navigation file that would route to other pages, but nothing is displaying. No error is displaying in my terminal but there is a lot of error in my browser console. I don't know what I am doing wrong. here is what my console says.

Navigation.jsx

import { Link } from 'react-router-dom'
import * as ROUTES from '../../constants/routes'

const Navigation = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to={ROUTES.SIGN_IN}>Sign In</Link>
        </li>
        <li>
          <Link to={ROUTES.LANDING}>Landing</Link>
        </li>
        <li>
          <Link t0={ROUTES.HOME}>Home</Link>
        </li>
        <li>
          <Link to={ROUTES.ACCOUNT}>Account</Link>
        </li>
        <li>
          <Link to={ROUTES.ADMIN}>Admin</Link>
        </li>
      </ul>
    </div>
  )
}

export default Navigation

Main.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

App.jsx

import React, { useState } from 'react'
import { Router, Routes } from 'react-router-dom'
import Navigation from './components/Navigation/Navigation'



function App() {
  const [count, setCount] = useState(0)

  

  return (
    <Router>
      <div className="App">
        <Routes>
          <Navigation/>
        </Routes>
      </div>
    </Router>
  )
}

export default App