리액트 라우터 질문

파일 위치와 결과화면입니다!

App.js 메인화면에서 console

main.js의 h1 눌렀을 때 console

main.js의 div 눌렀을 때 console 창 입니다

function App() {
  return (
    <div className='App'>
      <Top/>
      <Banner />
      <Main />
      <Footer />
    </div>
  );
}

App.js에 위 코드처럼 <Route>를 지우니 (*을 넣어도)
상세페이지 입니다 라는 문구는 뜨지만 
<Top />상세페이지입니다 문구<Footer />를 뜨게 하려던 의도와 다르게 
<Banner /><Main /> 까지 뜹니다. 


상세페이지로 이동했을 때 화면 : 

또한 App.js의 <Route>를 지우니 
Top.js에 연결해둔 로그인, 회원가입, 장바구니, 전체 상품을 누르면 이동하지 않고
App.js의 화면이 뜹니다.


Top.js파일 : 
 


콘솔은 
App.js 실행시에도 이동시에도 No routes matched location 라고 뜹니다.

와.. 대박.. 해결됐어요 감사합니다ಢ‸ಢ