Router and redirect in React.js

Question

I am a beginner in react. I'm trying to set up router and rendering to change pages but it gives me errors that I can't understand.

I have installed to terminal npm install react-router-dom in my index.js I have import BrowserRouter and embedded my APP

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom"

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

In my app.js I have import route switch from react-router-dom.

import Home from './page/home';
import Authentication from "./page/authentication";
import Header from './componenti/header';
import './App.css';
import DashboardComponent from './page/dashboardComponent';
import {Route, Switch} from "react-router-dom"

function App(props) {
  return (
    <div>
      <Header/>
      <Switch>        
          <Route exact path="/" render={(props)=> <Home/>}/>
          <Route exact path="authentication" render={(props)=> <Authentication/>}/>
          <Route exact path="/dashboard-component" render={(props)=> <DashboardComponent/>}/>
      </Switch>
    </div>
  );
}
export default App;

Very similar is the redirect, in my authentication page I imported the redirect from react-router-dom but it is not correct.

import styles from '../style/authentication.module.css';
import {useState} from "react";
import {Redirect} from "react-router-dom"

const Authentication = () => {

--- other code ---

    let postLoginRedirect = null;
    if (isLogged) {
    return postLoginRedirect = <Redirect to="/dashboardComponent"/>
    }
    return(
    <div>
    
    </div>
    )
}
export default Authentication

It seems to me everything is correct, I read a lot about this topic, I copied the solution from web app developed by me with react, but it doesn't work, I don't understand.

this is the error message:

ERROR in ./src/App.js 18:35-41

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)

ERROR in ./src/page/authentication.js 48:52-60

export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)

switch is coming from package called `react-router` `import { Route, Switch } from "react-router";` — Khant, Feb 16 '22 at 16:03

score 1 · Answer 1 · answered Feb 16 '22 at 16:05

1

if you are using react-router-dom v6 you should do replace Switch with Routes

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

answered Feb 16 '22 at 16:05

Mhammed Talhaouy

1,129
10
14

Drew Reese · Accepted Answer · 2022-02-16T16:42:53.340

Almost all the react-router-dom tutorials out there are outdated and still refer to the react-router-dom@5 API spec.

It looks like you've accidentally upgraded/installed the latest version of react-router-dom, version 6. You've two options from here:

Downgrade/revert back to version v5.x

Uninstall any current versions of react-router-dom and react-dom, and then install a specific v5 version of them.

From your project directory run:
- ```
npm un -s react-router-dom react-dom
```
- ```
npm i -s react-router-dom@5 react-dom@5
```

Complete/apply the v5 migration guide

Upgrading from v5

If you decide to move forward with the migration then you'll likely want to uninstall react-router since react-router-dom re-exports all the exports from react-router, or at a minimum you want to ensure it's on the same version.

Uninstall:

npm un -s react-router

Or reinstall latest of each:

npm un -s react-router-dom react-router

```
npm i -s react-router-dom@latest
```

App

import {Route, Switch} from "react-router-dom"

function App(props) {
  return (
    <div>
      <Header />
      <Routes>        
        <Route path="/" element={<Home />} />
        <Route path="authentication" element={<Authentication />} />
        <Route path="/dashboard-component" element={<DashboardComponent />} />
      </Routes>
    </div>
  );
}

Authentication

const Authentication = () => {

  --- other code ---

  let postLoginRedirect = null;
  if (isLogged) {
    return <Navigate to="/dashboardComponent" replace />;
  }
  return(
    <div>
      ...
    </div>
  );
}

score 0 · Answer 3 · edited Jan 30 '23 at 01:33

0

You can use the useNavigate hook from React Router. From the (docs):

The useNavigate hook returns a function that lets you navigate programmatically, for example in an effect:

Usage:

const navigate = useNavigate();
navigate("/somepage");

edited Jan 30 '23 at 01:33

biasedbit

2,860
4
30
47

answered Jan 27 '23 at 17:08

Alexandr Gotlib

1

score 0 · Answer 4 · answered Jul 27 '23 at 05:00

0

I use Navigate to redirect in React 18, like this

import { useNavigate } from 'react-router-dom';


export default function SignIn() {
  const navigate = useNavigate();
}

Then redirect to route:

navigate('/setup/location');

answered Jul 27 '23 at 05:00

Ahsan Najam

155
1
8

Router and redirect in React.js

4 Answers4