React Router: Redirect and Switch components not found in react-router-dom

Question

I'm encountering an issue with my React application where the Redirect and Switch components imported from react-router-dom are not being found. Here's my code:

import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import Users from './Users/pages/Users';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact>
          <Users />
        </Route>
         
        <Redirect to="/" />
      </Switch>
    </Router>
  );
};

export default App;

However, I'm getting the following error messages:

export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

I've already checked that react-router-dom "react-router-dom": "^6.21.0" is installed in my project, and I've verified that my import statements match the named exports provided by the package. I'm unsure why I'm still encountering this issue. Any insights or suggestions on how to resolve this problem would be greatly appreciated. Thank you!

Answer 1

I think redirect and switch function is replaced in version 6 you can use useNavigate hook for redirection purpose As for Switch use Route nested inside Routes component

    <BrowserRouter>
     <Routes>
        <Route index element={<Home/>}/>
        <Route path="/" element={<Something else/>}/>
     </Routes>
    </BrowserRouter>

you can check docs of react router dom version 6 for more detail explanations