-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
match
22.06.29 10:34 작성 조회수 359
1
안녕하세요~ 코린이입니다.
제가 코드를 그대로 따라하며 공부중인데
버젼이 바뀌면서 route를 쓰는 방식이 변한것같은데
component가 element로 바뀌었나요??
그리고 혹시 match.url은 버젼이 바뀌면서 사라진건가요??
올려주신 코드를 복붙하니 오류가 나오네요ㅠ
혹시 그렇다면
<Route path={`${match.url}/:roomId`} component={Room} />은
현재 어떻게 써야될까요??
useParams를 써서 해야되나요??
```
import React from "react";
import { Route, Link, Routes } from "react-router-dom";
export default function Rooms() {
return (
<div>
<h2>여기는 방을 소개하는 페이지입니다.</h2>
<Link to="bludRoom">파란 방입니다</Link>
<br />
<Link to="greenRoom">초록 방입니다</Link>
<br />
<Routes>
<Route exact path="rooms" render={() => <h3>방을 선택해 주세요.</h3>} />
<Route path="/:roomId" element={<Room />} />
</Routes>
</div>
);
}
function Room() {
return <h2>{` 방을 선택하셨습니다.`}</h2>;
}
```
이것저것 수정해가며 시도하고있는데 여기서 막혔네요 ㅠㅠ
다른 페이지는 작동하는데
http://localhost:3000/rooms/bludRoom 처럼 :roomId로 처리하려고 했던 페이지가
No routes matched location "/rooms/bludRoom"
라는 오류가 발생합니다ㅠ
답변을 작성해보세요.
답변 1