네비게이션바를 안사리게 만들고 싶어요....

[백지욱]

import "bootstrap/dist/css/bootstrap.min.css";
import "./routes/login.js";
import "./routes/home.js";
import "./App.css";
import React, { useEffect, useState } from "react";
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import { Button, Navbar, Container, Nav } from "react-bootstrap";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import Home from "./routes/home.js";
import Login from "./routes/login.js";

function App() {
// localStorage 구현
// 이유는 저장해야하니까 데이터를 일시적으로
const navigate = useNavigate();
const dispatch = useDispatch();
const authUserRedux = useSelector((state) => state.authUserReducer);

function Logout() {
localStorage.clear();
navigate.push("home");
dispatch({ type: "LOGOUT" });
setAuthUserLocal(false);
}

const [authUserLocal, setAuthUserLocal] = useState(false);
useEffect(() => {
const localToken = localStorage.getItem("token");
if (localToken) {
setAuthUserLocal(true);
}
});

return (
<div className="app">
<Navbar bg="light" variant="light">
{/* Navbar = 어느 페이지에서나 보이는 곳! 같은 */}
<Container>
{authUserLocal ? (
<div className="navbar">
<Navbar.Brand href="/">HOME</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link
onClick={() => {
navigate("/login", { replace: true });
}} 
>
Login
</Nav.Link>
<Nav.Link
onClick={Logout} 
LoginOut
</Nav.Link>
</Nav>
</div>
) : null}
</Container>
</Navbar>

<Routes>
<Route path="/home" element={<Home />}></Route>
<Route path="/login" element={<Login />}></Route>
</Routes>
</div>
);
}

export default App;

이렇게 코드를 짰습니다 삼항연산자 넣을려고 <div className="navbar">를 넣엇는데....네비게이션 역활을 제대로 못하네요 ㅠㅠ 부트스트랩이용해서 적용하기 어려울까요?

[백지욱]

함수식이 좀 잘못되서 거짓값인 null 로 나오네요
어떻게 조금더 접근할수있을까요?? 잘못짠거같기도 하네요 함수를

[codingapple]

로컬스토리지에 token이 처음 저장될 때에도 authUserLocal을 true로 만들어주면 될듯요 

[백지욱]

감사합니다

[글쓴이]

글