Type '{ children: Element[]; }' is missing the following properties from type 'RouterProps': location, navigator

Question

Trying to use React Router V6 with typescript, however im getting a type error on the <Router /> component when adding Routes within. It says that the children property being passed to the Router is not of the correct type, yet I've simply used the components the library has given.

My code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Router, Route } from 'react-router-dom';

// Styles
import './css/index.css';

// Pages Directory
import * as Pages from './pages';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(
    <React.StrictMode>
        <BrowserRouter>
            <Router>
                <Route path="/" element={<Pages.Home />} />
                <Route path="about" element={<Pages.About />} />
            </Router>
        </BrowserRouter>
    </React.StrictMode>
);

Error:

ERROR in src/index.tsx:18:5
TS2739: Type '{ children: Element[]; }' is missing the following properties from type 'RouterProps': location, navigator
    16 |        <React.StrictMode>
    17 |                <BrowserRouter>
  > 18 |                        <Router>
       |                         ^^^^^^
    19 |                                <Route path="/" element={<Pages.Home />} />
    20 |                                <Route path="about" element={<Pages.About />} />
    21 |                        </Router>

Answer 1

Try this, you have to change Router to Routes check this code.

root.render(
<React.StrictMode>
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Pages.Home />} />
            <Route path="about" element={<Pages.About />} />
        </Routes>
    </BrowserRouter>
</React.StrictMode> ):