[React] 같은 계층의 중첩 라우터끼리 페이지 이동

App.jsx 에 Arouter와 Brouter를 정의한 후

 

Arouter에 A_AComponent와 A_BComponent 를 정의한다.

Brouter에는 B_AComponent와 B_BComponent를 정의해준다.

 

이렇게하면 A_A => A_B 또는 B_A => B_B 로 useHistory나 Link태그를 통해 자유로운 이동이 가능해지는데

 

만약 A_A => B_A 로 이동은 가능할까?

 

기본적으로 url path는 변하지만 사용자가 직접 새로고침을 하지 않으면 렌더링이 되지않는 문제가 있다.

 

이유는 중첩 라우팅의 구조로 인해 A/A_A 에서 URL을 던지면 A/ 에서 찾게되는데 A/에는 B_로 시작하는 라우트가 없기때문에 렌더링이 되지 않는다.

 

그럼 어떤 방법이 있을까?

 

나는 페이지 이동을 성공 시키기 위해 Arouter에 url을 관리하는 history를 선언하였고

자식 컴포넌트들에게 history자체를 넘겨주었다.

 

자식 컴포넌트들은 다른 라우터에 하위 라우터로 이동하고싶으면 해당 history 함수를 사용하여 이동하면 된다.

 

const VideoRouter = (props) => {
	const urlHistory = useHistory()
    
    return (
    	<VideoHeader urlHistory={urlHistory} />
    )
}

history를 라우터에서 생성해 자식컴포넌트에 넘겨주고,

 

<div className="btn search" 
	onClick={() => {props.urlHistory.push('/search')}}>
<span className="hidden">검색</span></div>

자식 컴포넌트에서 남겨받은 history를 사용해 push를 해준다.