Breaking News: Grepper is joining You.com. Read the official announcement!

protected route react v6

Shamim answered on September 3, 2022 Popularity 10/10 Helpfulness 5/10

answer protected route react v6

related protected routes react router dom v6

protected route react v6

Comment

 // PrivateRoute.js
 import { useSelector } from "react-redux";
 import { Navigate } from "react-router-dom";

function PrivateRoute({ children }) {
  const { user } = useSelector((state) => state.user);
  const token = localStorage.getItem("token");

  if (!token) {
    return <Navigate to="/login" replace />;
  }
  return children;
}
export default PrivateRoute;
 
 // App.js
 <Router>
      <AuthProvier>
        <Routes>
          <Route path="login" element={<Login />}></Route>
          <Route path="/dashboard" element={
            <PrivateRoute>
               <Dashboard/>
            </PrivateRoute>}
            >
            <Route path="user" element={<User />} />
            <Route path="system" element={<System />} />
            <Route path="customer" element={<Customer />} />
            <Route path="customer/:id" element={<CustomerDetail />} />
          </Route>
          <Route path="*" element={<Navigate to="/home" />}></Route>
        </Routes>
      </AuthProvier>
  </Router>

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript protected

Link to this answer
Share Copy Link

Contributed on Sep 03 2022

Shamim

0 Answers Avg Quality 2/10

Closely Related Answers

protected routes react router dom v6

Comment

//Create Privateroutes.jsx
import { Navigate, Outlet } from 'react-router-dom'
const PrivateRoutes = () => {
  let auth = {'token':true}
return (
    auth.token ? <Outlet/> : <Navigate to='/login'/>
  )
}

import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import PrivateRoutes from './auth/PrivateRoutes';
.
.
.

...
function App() {
  return (
    <Router>
        <Routes>
          <Route element={<PrivateRoutes/>}>
  			  //All routes inside this route are protected
              <Route path='/' element={<Users/>} />
              <Route path='/products' element={<Products/>} />
          </Route>
          <Route path='/login' element={<Login/>}/>
        </Routes>
    </Router>
  );
}

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: www.youtube.com

Tags: dom

Link to this answer
Share Copy Link

Contributed on Aug 22 2023

Live Tembiso

0 Answers Avg Quality 2/10

protected route react v6

Contents

More Related Answers

protected route react v6

Closely Related Answers

protected routes react router dom v6

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.