CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Cimo
Cimo

Reputation: 185

Router and redirect in React.js

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)

Upvotes: 5

Views: 6492

Answers (4)

Ahsan Najam
Ahsan Najam

Reputation: 363

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

Upvotes: 0

Alexandr Gotlib
Alexandr Gotlib

Reputation: 1

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");

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 202721

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:

  1. 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

  2. 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>
  );
}

Upvotes: 0

Mhammed Talhaouy
Mhammed Talhaouy

Reputation: 1259

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

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

Upvotes: 1

Related Questions