[debugging] 리액트 라우팅 시 최초 경로의 페이지가 타 페이지와 중첩되어 렌더링되는 현상

[수정 전 jsx 파일]

 return (
    <>
      <BrowserRouter>
      <Route path="/">
        <Layout initialCartItem={initialCartItem }children={<Main isLogin={isLogin} store={store} />}/>
      </Route>
        <Route path="/blog">
          <LayoutBlog children={<Blog />}/>
        </Route>
        <Route path="/yourblog">
          <LayoutBlog children={<Yourblog blogData={blogData} />}/>
        </Route>
       ...
      </BrowserRouter>
      </>
      );

 

 

url 변경하여 브라우저에서 렌더링되는 화면들이 최초 경로("/")의 화면 아래에 뜨는 현상 발생하여 라우팅 담당하는 jsx파일을 수정하였다.

 

[수정 후 jsx파일]

      <Route path="/" exact component={Main}>
        <Layout initialCartItem={initialCartItem }children={<Main isLogin={isLogin} store={store} />}/>
      </Route>

최초 경로에 해당하는 컴포넌트를 불러올 때 exact를 속성을 추가하여 모든 요청에 매칭되지 않고 정확히 값이 일치할 때만 해당 루트를 호출하도록 디버깅하였다.