TIL - 20/03/23 (React router 중첩 라우팅)

오늘 한일 

• 중첩 라우팅에 대해 찾아보았다.  
• https://www.daleseo.com/react-router-nested/

React Router로 중첩 라우팅 하기

하지만 실제로는 막상 중첩 라우팅을 사용하지 않고 적용시켰다. 현재 내 url이 가령  http://localhost:3000/solve/영어단어/4 라고 한다면 여기서 버튼1과 같은 방식으로 Link를 붙이면 http://localhost:3000/solve/영어단어/solve/영어단어/5 이런 식으로 가게 된다는 것을 알았다. 버튼3과 비교할때 앞에 /를 붙인 버튼 2의 방식으로 하면  http://localhost:3000/3 이런 식으로 가버린다. 내가 원하는 대로 가장 마지막 부분만 바꾸고자 한다면 버튼3과 같은 방식을 해야 한다. 

//버튼1
<Button>
  <Link
    to={`solve/${match.params.domain}/${
      match.params.subdomain
    }/${Number(match.params.qNumber) + 1}`}
  >
    다음
  </Link>
</Button>

//버튼2
<Button>
  <Link to={`/${Number(match.params.qNumber) + 1}`}>다음</Link>
</Button>

//버튼3
<Button>
  <Link to={`${Number(match.params.qNumber) + 1}`}>다음</Link>
</Button>

 

내일 할일 

• 정답 가리는 부분 
• fake data 만들기 
• 전반적 문제 풀기 화면 되게 만들기 

---

얼른 대략적인 틀을 만들고 서버쪽 구현을 해봐야겠다. 

스스로 코딩에 대한 자신감이 없어서인지 자꾸 공부를 회피하게 되는데 들이대자. 시간 말고는 잃을게 없다.