리액트 라우터 질문

[이하은]

가장 마지막 사진에서
main 의 h1을 눌러도 / Best의 div를 눌러도 
detail의 상세페이지입니다 라는 문구가 뜨지 않아요
페이지의 상단 하단만 뜨고 Detail의 내용이 불러와지지 않아요ㅠㅠ

[이하은]

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

[codingapple]

개발자도구 콘솔창에 뭐 뜨나 확인해봅시다

[이하은]

App.js 메인화면에서 console

main.js의 h1 눌렀을 때 console

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

[codingapple]

App.js에 있는 <Route>는 path="*"로 바꾸거나 쓸데없는거같은데 지우거나 합시다

[이하은]

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 라고 뜹니다.

[codingapple]

그럼 App 안에 
<Route path="/" element={ <Banner /> <Main /> }>
<Route path="/detail" element={ <Detail/> }>
각각 넣으면 될듯요

[이하은]

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

[이하은]

강사님 
<Route path="/detail" element={ <Detail/> }>
이 코드는 Main.js에 넣었었고
<Route path="/" element={ <main><Banner/><Main/><main/> }>
이 코드를 App.js에 넣은 상태였는데 
그때는 왜 실행이 제대로 안 되었던 건가요?

또 콘솔에 여전히 
No route matched location
문구가 뜨는데 해결이 필요한 건가요?

[codingapple]

<Route> 안에는 <Routes> 말고 <Route>만 쓰면 될 수도 있습니다

[글쓴이]

글