Type '{ path: string; element: Element; }' is not assignable to type 'IntrinsicAttributes & BrowserRouterProps'

Question

Trying to set up routing with React-Router in my React-Typescript app but I am receiving error on my path keyword:

Type '{ path: string; element: Element; }' is not assignable to type 'IntrinsicAttributes & BrowserRouterProps'.

Haven't been able to find anything online that has helped yet. I've installed react-router-dom v6 and the @types version as well.

App.tsx

import * as React from 'react'
import './App.css'
import { BrowserRouter, BrowserRouter as Route, Routes } from 'react-router-dom';
import { Header } from './components/navbar/Header';
import Admin from "./components/pages/Admin"
import Approvals from "./components/pages/Approvals"
import Dashboard from "./components/pages/Dashboard"
import Providers from "./components/pages/Providers"
import Requestors from "./components/pages/Requestors"
import Services from "./components/pages/Services"

export default function EAOneApp() {
  return (
    <div className="eaOneApp">
      <BrowserRouter>
        <Routes>
          <Route path='/:page' element={<Header />} />
          <Route path='/' element={<Header/>} />

          <Route path='/' element={<Dashboard/>} />
          <Route path='/approvals' element={<Approvals />} />
          <Route path='/requestors' element={<Requestors />} />
          <Route path='/services' element={<Services />} />
          <Route path='/providers' element={<Providers />} />
          <Route path='/admin' element={<Admin />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

Answer 1

Issue is the import, you are importing and rendering a BrowserRouter as a Route for some reason. The "BrowserRouterProps" part of the warning should have been a good clue on the typing discrepancy.

import {
  BrowserRouter,
  BrowserRouter as Route, // <-- Whoopsies!
  Routes
} from 'react-router-dom';

Just import the Route component.

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

Also, react-router-dom@6 is written entirely in Typescript so there shouldn't be any extraneous @types to install.