react-router-dom <Routes> and <BrowserRouter> errors

Question

I am using react-router-dom and am facing an issue with using <Routes>: Here is my index.tsx file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

and this is my App.tsx file

import React from 'react';
import { RecoilRoot } from 'recoil';
import { BrowserRouter, BrowserRouter as Routes, Route } from 'react-router-dom';
import Loading from './sign/loading';
import SignIn from './sign/signIn';
import SignUp from './sign/signUp';
import SettingCare from './manage/settingCare';
import ManageCare from './manage/manageCare';
import AddCare from './manage/addCare';
import Main from './main/main';

function App() {
  return (
    <RecoilRoot>
      <Routes>
        <Route path='/' element={<Main />} />
        <Route path='/loading/*' element={<Loading />} />
        <Route path='/sign-in/*' element={<SignIn />} />
        <Route path='/sign-up/*' element={<SignUp />} />
        <Route path='/setting-care/*' element={<SettingCare />} />
        <Route path='/manage-care/*' element={<ManageCare />} />
        <Route path='/add-care/*' element={<AddCare />} />
      </Routes>
    </RecoilRoot>
  );
}

export default App;

With this code, I am getting the following error:

After searching, I added the <BrowserRouter> element, like so:

...
function App() {
  return (
    <RecoilRoot>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Main />} />
          <Route path='/loading/*' element={<Loading />} />
          <Route path='/sign-in/*' element={<SignIn />} />
          <Route path='/sign-up/*' element={<SignUp />} />
          <Route path='/setting-care/*' element={<SettingCare />} />
          <Route path='/manage-care/*' element={<ManageCare />} />
          <Route path='/add-care/*' element={<AddCare />} />
        </Routes>
      </BrowserRouter>
    </RecoilRoot>
  );
}
...

But, it still doesn't work, giving the following error:

Answer 1

This import

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

aliases BrowserRouter to two different things.

Change the import to

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

and the error should go away.

Answer 2

Routes is a separate tag that wraps Route tag and cannot be imported and assigned to BrowerRouter. So import them separately. Like So:

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

Answer 3

SOLUTION: your Import please change it to as below

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

Change your import to

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

ERROR GONE!!!