“Защищенный маршрут в React JS” Ответ

Защищенный маршрут в React JS

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

const Protected = ({ component, ...rest }) => {
	<Route
		{...rest}
		render={() => {
			localStorage.getItem('login') ? (
				<component {...props} />
			) : (
				<Redirect to='/login' />
			)
		}}
	/>
};
export default Protected


// app.js 
import Protected from'./components/Protected'

<Router>
<Protected exact path="/"component={Home}/>
<Protected exact path="/about"component={About}/>
<Protected exact path="/contact"component={Contact}/>
</Router>
Abhishek

реагировать защищенный маршрут

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoutes = () => {
  const location = useLocation();
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return authLogin 
    ? <Outlet />
    : <Navigate to="/login" replace state={{ from: location }} />;
}
Fierce Fly

реагировать защищенный маршрут

<BrowserRouter>
  <Routes>
    <Route path="/" element={<PrivateRoutes />} >
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/about" element={<About />} />
    </Route>
    <Route path="/login" element={<Login />} />
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</BrowserRouter>
Fierce Fly

Ответы похожие на “Защищенный маршрут в React JS”

Вопросы похожие на “Защищенный маршрут в React JS”

Больше похожих ответов на “Защищенный маршрут в React JS” по JavaScript

Смотреть популярные ответы по языку

Смотреть другие языки программирования

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel