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

react router dom v6 private route

Levi Ackerman answered on January 26, 2022 Popularity 3/10 Helpfulness 4/10

answer react router dom v6 private route

related private router react v6

react router dom v6 private route

Comment

import { createContext } from "react";
import {BrowserRouter, Route, Routes} from "react-router-dom"
import PrivateRoutes from "./privateRoutes/PrivateRoutes";

export const AuthContext = createContext();

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact element={<PrivateRoutes />}>
          <Route path="/items" element={<Items />} />
          <Route path="/cart" element={<Cart />} />
          <Route path="/wishlist" element={<Wishlist />} />
        </Route>
        <Route path="/login" element={<Login />} />
        <Route path="/create-profile" element={<CreateProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import React from 'react'
import { Outlet, Navigate } from 'react-router-dom'
import { AuthContext } from '../App';

export default function PrivateRoutes() {
    const userId = localStorage.getItem("userId");
    const role = localStorage.getItem("role");

    const loggedInUser = {
        userId,
        role
    }

    return (
        <AuthContext.Provider value={loggedInUser}>
            {userId ? <Outlet  /> : <Navigate to="/login" />};
        </AuthContext.Provider>

    )

}

Popularity 3/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: dom javascript private react-router

Link to this answer
Share Copy Link

Contributed on Jun 28 2022

Levi Ackerman

0 Answers Avg Quality 2/10

Closely Related Answers

private router react v6

Comment

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  let login = false;
  return (
    <div className="App">
      <BrowserRouter>
        {login ? (
          <>
              <Routes>
                <Route path="/" element={<Dashboard />} />
              </Routes>
        ) : (
          <Routes>
            <Route path="/" element={<Login />} />
          </Routes>
        )}
      </BrowserRouter>
    </div>
  );
}

export default App;

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 26 2022

Zany Zebra

0 Answers Avg Quality 2/10

react router dom v6 private route

Contents

More Related Answers

react router dom v6 private route

Closely Related Answers

private router react v6

Grepper

Documentation

Social

Legal

Contact

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