[TIL] 로그인 후 특정 페이지

 

Router.jsx에서 로그인 된 사람만 특정 페이지에 들어올 수 있게끔 하는걸 구현하고 싶어서 하는 중에

 

function Router() {
    return (
        <BrowserRouter>
            <Routes>
                <Route element={<AuthLayout />}>
                    <Route path="/login" element={<Login />} />
                </Route>
                <Route path="/" element={<Home />} />
                <Route path="detail/:id" element={<Detail />} />
                <Route path="*" element={<Navigate replace to="/" />} />
            </Routes>
        </BrowserRouter>
    );
}

export default Router;

 

원래 이렇게해서 React-router-dom v6에서 도입된 라우트 구조를 지정하는 데 사용되는 React 컴포넌트 Outlet을 사용하려고 하였으나 따로 파일을 만들지 않고 쉬웠던 방법이 있어 바꿔보았다.

 

function Router() {
const isLogin = useSelector((state) => state.AuthSlice.isLogin);
return (
	<BrowserRouter>
		<Routes>
			{isLogin ? (
				<>
					<Route path="/" element={<Home />} />
					<Route path="detail/:id" element={<Detail />} />
					<Route path="*" element={<Navigate replace to="/" />} />
				</>
			) : (
				<>
					<Route path="/login" element={<Login />} />
					<Route path="/signup" element={<SignUp />} />
					<Route path="*" element={<Navigate replace to="/login" />} />
				</>
			)}
		</Routes>
	</BrowserRouter>
);
}

export default Router;