-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
[4:41] 부분 V6 에서는 이렇게 바꾸는게 맞나요??
22.05.01 12:06 작성 조회수 785
0
먼저 올라온 질문의 수정 방법대로 하니까.
'You rendered descendant <Routes> (or called `useRoutes()`) at "/accounts/" (under <Route path="">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.'
이런 에러가 뜨더라구요.
그래서
[https://stackoverflow.com/questions/70604020/please-change-the-parent-route-path-to-route-path]
의 내용을 참조해 보니까.
LoginRequiredRoute.js 파일을
<Route {...kwargs} component={component} />
이 부분을
V6 버전에 맞게 변경한뒤,
<Routes >
<Route path="/profile" element={<Profile />} />
</Routes>
이렇게 해주는 것도 맞나요??
로그인 인증이 필요한 부분을 계속 연결해서 쓰는 방법으루요.
답변을 작성해보세요.
0
쾌활한 얼룩말
질문자2022.05.02
네..
Login.js 는
export default function AccountRoutes() {
return (
<>
<Routes >
{/* <Route path="/profile" element={<Profile />} /> */}
{/* <LoginRequiredRoute path="/profile" element={<Profile />} /> */}
{/* <Route path="/profile" element={<Profile />}>
<Route element={<LoginRequiredRoute />} />
</Route> */}
<Route path="/profile/*" element={<LoginRequiredRoute />} >
<Route element={<Profile />} />
</Route>
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</>
)
}
이렇게 했고,
LoginRequiredRoute.js 는
export default function LoginRequiredRoute({element : Component, ...kwargs}) {
const {store : { isAuthenticated }} = useAppContext();
console.log('isAuthenticated : ',isAuthenticated);
console.log('element : ',Component);
if ( isAuthenticated ) {
} else {
}
return (
<Routes >
{/* <Route {...kwargs} component={component} /> */}
{/* <Route {...kwargs} rennder = {props => { */}
<Route path="/profile" element={<Profile />} rennder = {props => {
if ( isAuthenticated ) {
return <Component {...props} />;
} else {
return <Navigate replace to={{pathname : "/accounts/login", state : {from: props.location}}} />
}
}} /> ;
</Routes>
)
}
로 했는데요.
{/* <Route {...kwargs} component={component} /> */}
{/* <Route {...kwargs} rennder = {props => { */}
<Route path="/profile" element={<Profile />} rennder = {props => {
이 부분을 세가지 경우를 다 써봤는데요.
location.state : null 가 계속 되서, 로그인이 되어도
profile 페이지로 넘어가질 않더라구요.
이진석
지식공유자2022.05.02
페이지 이동 후에 state가 null이라면
- navigate 시에 state를 잘 지정했는 지, 먼저 체크를 차근차근 해보셔야 합니다. console.log를 찍어보거나 디버거를 걸어볼 수 있겠죠.
- 그리고 값이 잘 지정되었다면, 값을 잘 읽어와야할 것입니다.
react-router-dom@6에서 navigate는 훅을 활용하거나 컴포넌트를 활용할 수 있네요.
훅은 아래와 같이 state를 지정하실 수 있고,
const navigate = useNavigate();
navigate("이동할 주소", { state: state });
컴포넌트는 아래와 같이 state를 지정할 수 있네요. 쓰신 코드에서는 to 속성값 내에 state를 지정하셨는 데, 이를 밖으로 빼보세요.
<Navigate to="이동할 주소" state={state} />
---
그리고, react-router-dom@6 에서는 Route에 속성값으로서 path와 element를 지정합니다. path를 매칭이 되면 element를 렌더링하는 거죠. 그러니 Route element 속성에 <LoginRequiredRoute />를 지정하는 것은 적절하지 않습니다. LoginRequiredRoute 이름을 LoginRequiredPage로 변경하시고, 내부 구현에서 Route는 모두 제거하시는 것이 맞습니다.
@6에서는 Outlet을 활용하여 중첩 라우팅을 수행하니, 아래와 같이 써보실 수 있으실 듯 합니다.
문제를 빨리 해결하는 것보다, 문제를 차근차근 확인하고 체크해나가는 과정이 학습에 보다 큰 의미가 있습니다. 차근차근 참고하시어 화이팅입니다. :-)
0
이진석
지식공유자2022.05.02
안녕하세요.
v5에서는 Route에서 path를 지정하지 않거나 exact를 지정하지 않고, 하위 주소까지 포함시키는 것이 가능했는 데, v6부터는 exact 속성도 없어지고 path를 필수로 지정하도록 변경되었습니다. Switch 대신에 Routes를 쓰구요.
하위 경로나 디폴트 경로를 지정하시기 위해서는 "*" 지정이 필요합니다. 오류메세지를 보시면 parent route path has no trailing "*". 부분이 있는 데요. 이는 부모 route path에서 "*" 지정이 누락되었다는 메세지입니다.
질문 뒷 부분은 제가 질문이 잘 이해가 되지 않아서요. 좀 더 정리해서 코드와 함께 질문해주시면, 제가 보다 좋은 답변을 드릴 수 있을 듯 합니다.
화이팅입니다. :-)
답변 2