링크를 직접 클릭하여 React Router 구성요소를 다시 렌더링하세요.

Question

<p>저는 <code>react-router-dom</code> v6</p>을 사용합니다.

코드

<pre class="brush:php;toolbar:false;"><NavLink to="/pathOne" className="ripple">label1</NavLink> <NavLink to="/pathTwo" className="ripple">label2</NavLink></pre>

질문

<p>링크 하나를 클릭하면 Route 구성요소가 예상대로 렌더링됩니다. 그러나 "/pathOne"이 활성화된 상태에서 다시 클릭하면 아무 일도 일어나지 않습니다. </p><p>활성 링크를 클릭하여 경로 요소를 강제로 다시 렌더링하는 방법이 있습니까? </p><p>reloadDocument 속성이 설정된 경우 전체 페이지를 새로 고칠 수 있지만 이는 실행 가능한 옵션이 아닙니다.

Answer 1

정말로 원하는 것이 해당 경로에 대한 링크를 클릭할 때마다 경로 구성 요소를 다시 렌더링하는 것이라면 해당 구성 요소가 useLocation hook. Each time the link is clicked a new location object reference is created. The new location 객체 참조를 호출하도록 하면 이를 사용하여 구성 요소가 다시 렌더링되도록 트리거하기에 충분합니다.

예:

으아악 으아악