React.js) react-router-dom 라우팅 시 url은 변경되고 렌더링은 안되는 경우

문제 상황

 

리액트를 사용하여 포트폴리오 제작을 준비하고 있는 와중 발생한 에러입니다.

 

 

react-router-dom을 사용하여 App.js에서 라우팅을 구현하였습니다. (여기서 Router는 BrowserRouter입니다.)

 

function App() {
  return (  
    <>
    <Router>
      <Route exact path="/" component={Main}/>
      <Route path="/about" component={About}/>
      <Route path="/reference" component={Reference}/>
      <Route path="/script" component={Script}/>
      <Route path="/youtube" component={Youtube}/>
      <Route path="/contact" component={Contact}/>
      <Route path="/portfolio" component={Portfolio}/>
    </Router>
  </>
  );
}

 

 

"/"경로로 접속한 메인페이지에서 "/portfolio" 로 헤더의 Link to를 클릭해서 이동하면 url은 정상적으로 바뀌나 페이지는 렌더링 되지 않는 현상이 발생했습니다. 여기서 새로고침 버튼을 클릭하면 페이지가 정상적으로 렌더링 되었습니다.

function Header(props){
    return(
        <header id="header" className={props.color}>
            <div className="header__port">
                <Link to="/portfolio">portfolio</Link>
            </div>
            <div className="header__logo">
            <Link to="/">Wonseok</Link>
            </div>
            <div className="header__menu">
                <u>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/reference">Reference</Link></li>
                    <li><Link to="/youtube">Youtube</Link></li>
                    <li><Link to="/script">Script</Link></li>
                    <li><Link to="/contact">Contact</Link></li>
                </u>
            </div>
        </header>
    )
}

 

공식 문서, 스택 오버플로우, 구글링을 통해 알아낸 해결책은 다음과 같습니다.

 

1. router에 key값을 넣어 url이 변경되었음을 감지하게 해준다.

 

<Route path="/movie/:id" render={(props) => ( <Detail key={props.match.params.id} {...props}/> )}/> 
<Route path="/show/:id" render={(props) => ( <Detail key={props.match.params.id} {...props}/> )}/>

 

공식 문서에도 나와있는 좋은 해결방법이라고 합니다.

If the same component is used as the child of multiple <Route>s at the same point in the component tree, React will see this as the same component instance and the component’s state will be preserved between route changes. If this isn’t desired, a unique key prop added to each route component will cause React to recreate the component instance when the route changes.

https://reactrouter.com/web/api/Route/route-render-methods

그러나 저의 경우에 url 경로가 완전히 바뀌는 상황이라 다른 문제라고 판단하여 다른 방법을 찾아보았습니다.

 

 

2. Router가 중복 사용되었는지 확인한다.

 

https://kjhg478.tistory.com/26 여기서 확인한 해결방법입니다. 이분은 Layout을 Router로 감싸서 호출하고 또 Layout 안에서 Router를 사용하여 별개의 라우터끼리 url 정보를 전달하지 못하여 발생한 문제였습니다.

 

제 경우 Router는 App.js에서 한 번만 사용했으므로 해당사항이 없다고 판단하였습니다.

 

 

 

3. Router를 부모 컴포넌트에서 사용한다.

 

2번을 참고하여 생각해 낸 방법입니다. App.js를 호출하는 index.js에서 아래와 같은 방법으로 App을 호출합니다.

const rootNode = document.getElementById('root');

ReactDOM.createRoot(rootNode).render(
      <React.StrictMode>
        <App/>
      </React.StrictMode>
);

 

위 코드에서 createRoot를 아래와 같이 바꾸고

 

const rootNode = document.getElementById('root');

ReactDOM.createRoot(rootNode).render(
    <BrowserRouter>
      <React.StrictMode>
        <App/>
      </React.StrictMode>
    </BrowserRouter>
);

 

App.js에서 Router를 빼고 fragment tag로 감싸주었습니다.

 

function App() {
  return (  
      <>
        <Route exact path="/" component={Main}/>
        <Route path="/about" component={About}/>
        <Route path="/reference" component={Reference}/>
        <Route path="/script" component={Script}/>
        <Route path="/youtube" component={Youtube}/>
        <Route path="/contact" component={Contact}/>
        <Route path="/portfolio" component={Portfolio}/>
      </>
  );
}

 

 

이 방법으로 페이지가 렌더링되지 않는 현상을 해결하였습니다.