여기에 문제 목록들을 클릭하면 지금은 "/editor" 페이지로 넘어가는데 url에 각 문제의 id를 포함시켜주고 싶었다. 그래야 나중에 DB에 연결했을 때 서로 다른 문제 화면이 나오게 할 수 있을 것 같았다.
onClick={() => navigate(`editor/${prob.id}`)그래서 클릭 시에 id를 포함한 url로 가게 하고 app.tsx파일에는
<Route path="/editor:id" element={<Main_c />} />이렇게 줘서 이제 editor로 시작하는 주소로 가면 editor 페이지로 가고, admin에서 접근하면 다른 페이지로 가게 했는데 주소에서는 editor/{id} 이렇게 나와서 원하는 페이지가 나오지 않았다.
여러가지 시도를 하다가
onClick={() => navigate(`${prob.id}`)<Route path=":id" element={<Main_c />} />이렇게 주니까 메인페이지에서는 localhost:3000/{id}로 잘 넘어가고, 관리자 페이지에서는 /admin/algorithm/{id}이렇게 주소가 잘 넘어가졌다. 주소 어떻게 줘야하는지 공부를 해야겠다.
useNavigate
사용법 정확히 알고 싶어서 코드 들어가보니까
Returns an imperative method for changing the location. Used by
<Link>s, but may also be used by other elements to change the location.
이렇게 적혀있었다. Link에서 쓰던 것처럼 위치를 변경하는데 쓰이고 다른 작업을 추가로 하고 싶을 때 쓴다고 한다. 파라미터로는 두 개를 받는데 하나는 어디로 갈지 다음 주소와 다른 하나는 여러 option이 있다.
공식문서에 따르면 어디로 갈지 적는 거는 history stack에 더해져서 다음 페이지로 이동하거나 "-1"을 넣어서 뒤로가기가 작동한다고 한다.
그외에는 replace로 히스토리 스택에 안 더하고 새로 시작하거나 상태정보 넣어주기, 상대 경로 사용하기 등 옵션이 있지만 내가 원하는 정보가 없었다. 주소를 어떻게 넣어줘야 내가 원하는 위치로 이동하는지 알고 싶었다.
