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

react router v6 privatre routr for typescript

Mystic Dev answered on February 28, 2023 Popularity 1/10 Helpfulness 1/10

answer react router v6 privatre routr for typescript

related react router v6 privatre routr for typescript

react router v6 privatre routr for typescript

Comment

import React from "react";
import { Navigate, useLocation, useNavigate } from "react-router-dom";
import { useAppSelector } from "../../state/hooks";

const ProtectedRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {
  const {user} = <Your-State-Provider>// Redux/Context or even in-memory user
  const location = useLocation();
  return !user.isAuthenticated ? (
    <Navigate to={"/login"} state={{ from: location }} replace />
  ) : (
    children
  );
};

export default ProtectedRoute;

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: stackoverflow.com

Tags: react-router typescript

Link to this answer
Share Copy Link

Contributed on Feb 28 2023

Mystic Dev

0 Answers Avg Quality 2/10

Closely Related Answers

react router v6 privatre routr for typescript

Comment

import { Fragment } from "react";
import ProtectedRoute from "./components/ProtectedRoute/ProtectedRoute";//Your protected route
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Login from "./pages/Login/Login";
import MainPage from "./pages/MainPage/MainPage";


const App = () => {
  return (
    <Router>
      <Fragment>
        <nav>
          <Link to="/admin" />
        </nav>
        <Routes>
          <Route
            path="/"
            element={
              <ProtectedRoute>
                <MainPage />
              </ProtectedRoute>
            }
          />
          <Route path="/login" element={<Login />} />
        </Routes>
      </Fragment>
    </Router>
  );
};

export default App;

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: stackoverflow.com

Tags: react-router typescript

Link to this answer
Share Copy Link

Contributed on Feb 28 2023

Mystic Dev

0 Answers Avg Quality 2/10

react router v6 privatre routr for typescript

Contents

More Related Answers

react router v6 privatre routr for typescript

Closely Related Answers

react router v6 privatre routr for typescript

Grepper

Documentation

Social

Legal

Contact

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