그 라우터 방식중에 PrivateRoute, PublicRoute 방식중 질문이 있는데요.
App.js
return (
<div className="App">
<Switch>
<Route>
<PrivateRoute path='/'>
<Navbar
username={user.username}
onLogout={onLogout}
onAllSns={onAllSns}
onMySns={onMySns}
/>
</PrivateRoute>
<PrivateRoute exact path='/:username'>
<MySns snsService={snsService} />
</PrivateRoute>
<PrivateRoute exact path='/board'>
<Board boardService={boardService} />
</PrivateRoute>
<PrivateRoute exact path='/editorBoard'>
<EditorBoard boardService={boardService} user={user} />
</PrivateRoute>
<PrivateRoute exact path='/:id'>
<DetailBoard boardService={boardService}/>
</PrivateRoute>
<PublicRoute Restircted={true} exact path='/' component={Login}>
<AllSns snsService={snsService} />
</PublicRoute>
</Route>
</Switch>
</div>
);
}
privateRoute.jsx
import React from "react";
import { Redirect, Route } from "react-router-dom";
function PrivateRoute({ component, ...rest }) {
const TOKEN = process.env.REACT_APP_BASE_URL;
return (
<Route
{...rest} render={props =>
localStorage.setItem(TOKEN) ? (
<component {...props} />
) : (
<Redirect to = "/login" />
)
}
/>
);
}
export default PrivateRoute;
publicRoute.jsx
import React from 'react'
import { Redirect, Route } from "react-router-dom";
function PublicRoute({ component, restricted, ...rest }) {
const TOKEN = process.env.REACT_APP_BASE_URL;
return (
<Route
{...rest} render={props =>
localStorage.setItem(TOKEN) && restricted ? (
<Redirect to="/main" />
) : (
<component {...props} />
)
}
/>
);
}
export default PublicRoute
이게 코드인데요 제가 로그인폼을 만들어서 로그인전에는 로그인폼 외에는 안보이게 하고싶어서
구글에 참조 하면서 만들어봤는데요.
이렇게 만드니깐 예를들어 Board.jsx 파일에 써져있는 리스트글들이 안사라지고 Detail.jsx에도 옮겨져 와지는 오류가 있습니다.
글들이 안사라지고 계속 따라다녀요 .. 분명 저거 문제인거 같은데 해결을 못하고있습니다.
도와주세요 ㅠㅠ
