useNavigate 사용하기

페이지 이동은 Link를 사용하면 된다고 했다.
근데 BootStrap같은 것을 사용한다면

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

이와같은 코드를 사용해도 된다.

<Route path="*" element={ <div>없는페이지임</div> } />

path에 *을 사용하면 404에러 페이지로 이동하게 할 수 있다.

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

예를들어, /about/어쩌고 이런식으로 이동하는 페이지가 있다고 하자.

그러면 위의 코드처럼 /about에 감싸서 작성하면 상세페이지를 작성할 수 있다.

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>


function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

만약, 컴포넌트 안에 넣은 페이지들의 element값들이 보이지 않는다면, Outlet을 사용하여 보여지게 할 수 있다.