TSX : 'Routes' refers to a value, but is being used as a type here. Did you mean 'typeof Routes'?

Question

Typescript code (.tsx)

import { Route, Routes } from "react-router-dom";

const AppRoutes = () => {
    return (
        <Routes>
            <Route path="/" element={<span>Home Page</span>} />
        </Routes>
    );
};

export default AppRoutes;

Here's the code (https://i.sstatic.net/21ZT7tM6.png) (https://i.sstatic.net/7EYp6weK.png)

'Routes' refers to a value, but is being used as a type here.

Why this is not working ...

Answer 1

I always have different unexplainable errors while using other version of react-router dom that is not version 6. I would suggest you use the compactible version of react-router dom or the latest version.

npm install react-router-dom@6

or

npm install react-router-dom@latest

Answer 2

I guess you are not using any wrapper BrowserRouter components.

Remove/uninstall your package and install react-router-dom@latest as GifftyCode says.

You that code in your file then I hope it will be work

// App.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/">
          <Route index element={<span>Home Page</span>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Make sure that your App components are on your main.tsx files