React router dom version update

Question

I have this code what should I change to update it to the new react-router-dom version.

ProtectedRoute.js

import React from 'react';
import { Redirect, Route } from 'react-router-dom';

const Protectedroute = ({auth, component:Component, ...rest}) => {
    return (
        <div>
            <Route {...rest} render={(props)=>{
                if(auth) return <Component {...props} />
                if(!auth) return <Redirect to={{path : '/', state : {from : props.location}}} />
            }} />
        </div>
    );
}

export default Protectedroute;

App.js

import React, { Component, useEffect, useState } from "react";
import "./App.css";
import About from "./components/About";
import Contact from "./components/Contact";
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import Services from "./components/Services";
import Footer from "./components/Footer";
import Login from "./components/Login";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Register from "./components/Register";
import Dashboard from "./components/Dashboard";
import Logout from "./components/Logout";
import Protectedroute from "./components/ProtectedRoute";

class App extends Component {
  render() {

    
    // Check If User is Logged In
    const [auth, setauth] = useState(false);
    const [auth1, setauth1] = useState(true);

    const isLoggedIn = async () => {
      try {
        const res = await fetch("/auth", {
          method: "GET",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          credentials: "include",
        });

        if (res.status === 200) {
          setauth(true);
          setauth1(false);
        }
        if (res.status === 401) {
          setauth(false);
          setauth1(true);
        }
      } catch (error) {
        console.log(error);
      }
    };

    useEffect(() => {
      isLoggedIn();
    }, []);

    return (
      <Router>
        <div className="App">
          <Navbar />
          <Routes>
            <Route exact path="/" element={<Home />} />
            <Route exact path="/about" element={<About />} />
            <Route exact path="/service" element={<Services />} />
            <Route exact path="/contact" element={<Contact />} />
            <Route
              exact
              path="/login"
              element={
                <Protectedroute auth={auth1}>
                  <Login />
                </Protectedroute>
              }
            />
            <Route
              exact
              path="/register"
              element={
                <Protectedroute auth={auth1}>
                  <Register />
                </Protectedroute>
              }
            />
            <Route
              exact
              path="/dashboard"
              element={
                <Protectedroute auth={auth}>
                  <Dashboard />
                </Protectedroute>
              }
            />
            <Route
              exact
              path="/logout"
              element={
                <Protectedroute auth={auth}>
                  <Logout />
                </Protectedroute>
              }
            />
          </Routes>
          <Footer />
        </div>
      </Router>
    );
  }
}

export default App;

please remove 'help please' words everywhere, the core purpose of this community is to help. refer https://stackoverflow.com/help/how-to-ask. Did you gave any shot to update? What are the errors that you are getting, please share those instead. — mabiyan, Mar 19 '22 at 02:09

score 0 · Answer 1 · answered Mar 19 '22 at 07:08

0

Redirect component not supported in latest react-router-dom-v6. Try to use Navigate Component to redirect like this,

<Navigate to={'/'} state : {{from : props.location}} />

answered Mar 19 '22 at 07:08

Arun Dinesh

34
4

read this for more information.. https://adarshaacharya.com.np/blog/role-based-auth-with-react-router-v6 – Arun Dinesh Mar 19 '22 at 07:26
does not work with Navigate – Ahmed Chouaya Mar 19 '22 at 15:02
refer the above link. you get some idea. – Arun Dinesh Mar 21 '22 at 05:50

React router dom version update

1 Answers1