When using Browser Router to set up routes error occurs-CodePudding

I set up a BrowserRouter in index.tsx like follow:

import './index.css';
import {Route, Router} from '@mui/icons-material';

import {createTheme, ThemeProvider} from '@mui/material';

import App from './App';
import {StrictMode} from 'react';
import {lightTheme} from '@gds/react-mui';
import DocumentUIStartingPage from './pages/DocumentUI/StartingPage/DocumentUIStartingPage';
import reportWebVitals from './reportWebVitals';
import {createRoot} from 'react-dom/client';
import {BrowserRouter, Routes} from 'react-router-dom';

const theme = createTheme(lightTheme);
const container = document.getElementById('root');
const root = createRoot(container!);


root.render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App/>} exact />
          <Route path="/documentUI" element={<DocumentUIStartingPage/>} />
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  </StrictMode>
);



reportWebVitals();

then following error occurs for the 2 routes that routes to App and DocumentUIStartingPage,

"TS2769: No overload matches this call. Overload 1 of 2, '(props: { component: ElementType; } & { children?: ReactNode; classes?: Partial | undefined; color?: "inherit" | ... 8 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>): Element', gave the following error. Property 'component' is missing in type '{ path: string; element: Element; exact: true; }' but required in type '{ component: ElementType; }'. Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element', gave the following error. Type '{ path: string; element: Element; exact: true; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial | undefined; color?: "inherit" | "disabled" | ... 7 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'. Property 'element' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial | undefined; color?: "inherit" | "disabled" | ... 7 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'. OverridableComponent.d.ts(21, 7): 'component' is declared here."

Is there any way to resolve the error?

CodePudding user response：

Import the Route component from react-router-dom instead of @mui/icons-material.

Example:

import './index.css';
import App from './App';
import { StrictMode } from 'react';
import { lightTheme } from '@gds/react-mui';
import DocumentUIStartingPage from './pages/DocumentUI/StartingPage/DocumentUIStartingPage';
import reportWebVitals from './reportWebVitals';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom'; // <-- import Route here
import { Router } from '@mui/icons-material';
import {createTheme, ThemeProvider} from '@mui/material';

const theme = createTheme(lightTheme);
const container = document.getElementById('root');
const root = createRoot(container!);

root.render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/documentUI" element={<DocumentUIStartingPage />} />
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  </StrictMode>
);

If you do actually need a Route and Router icon then I suggest renaming them so it's abundantly clear what they are so to avoid any confusion.

Example:

import {
  Route as RouteIcon,
  Router as RouterIcon
} from '@mui/icons-material';