Reactログインコンセプト

Recat, react-router-dom(v6)

import React, { useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

const AppRouter = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(true);
  return (
    <Router>
      <Routes>
        {isLoggedIn ? (
          <>
            <Route path="/" element={<Home />} />
          </>
        ) : (
          <Route path="/" element={<Auth />} />
        )}
      </Routes>
    </Router>
  );
};

export default AppRouter;

isLoggedIn
ステータス値がtrue/ルートディレクトリのホーム構成部品の場合
ステータス値がfalse/rootのAuth素子の場合

発送useState()引越し

 const [isLoggedIn, setIsLoggedIn] = useState(true);

ルータコンポーネントはルーティング機能のみに注目します.
USStateをAppコンポーネントに移行し、Propsに転送することを考慮します.

3つの演算子を使用してコンテンツを制御する

{정보? "true 일때 보여줄값" : "false일때 보여줄 값"}

ログインしていますか?
既存のIDではありません.

ナビゲーションの分離

Navコンポーネントとして管理

import React, { useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";
import Navigation from "./Navigation";

const AppRouter = ({ isLoggedIn }) => {
 return (
   <Router>
     {/* 모두 참이면 마지막 값 반환 */}
     {isLoggedIn && <Navigation />}
     <Routes>
       {isLoggedIn ? (
         <>
           <Route path="/" element={<Home />} />
         </>
       ) : (
         <Route path="/" element={<Auth />} />
       )}
     </Routes>
   </Router>
 );
};

export default AppRouter;

import React from "react";
import { Link } from "react-router-dom";

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/profile">My Profile</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;