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:

yes, it is problem of file import. react-router-dom v6 is really confuse to me;;; — Boris Park
– Boris Park, Commented Jan 10, 2022 at 4:08

BrokenBenchmark · Accepted Answer · 2022-01-10 03:58:33Z

5

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.

answered Jan 10, 2022 at 3:58

BrokenBenchmark

19.4k7 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pramod thapa · Accepted Answer · 2022-05-17 05:55:46Z

1

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';

answered May 17, 2022 at 5:55

pramod thapa

111 silver badge3 bronze badges

Comments

Jamal Ashraf · Accepted Answer · 2022-03-26 12:29:04Z

0

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!!!

answered Mar 26, 2022 at 12:29

Jamal Ashraf

1,1151 gold badge11 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related