【初心者向け/ITスクール 88日】React Router

はじめに

今日は、ITスクールに通った88日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。

今日は、React Routerを使いながら、ページＵＩを動的に転換することを自習学習しました。SpringBootのPathVarialbeと使えば、効率がよさそうな気がしました。

ReactRouter

useNavigate

index.

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

App

import { Routes, Route, useNavigate, Outlet } from 'react-router-dom';

fuction App(){
  let navigate = useNavigate();
}

useStateのように、useNavigate()をimportします。let navigateは関数になります。
このような便利な機能を持っている関数をReact Hookといいます。

<Nav className='me-auto'>
   <Nav.Link onClick={() => {navigate('/');}}>Home</Nav.Link>
  <Nav.Link onClick={() => {navigate('/detail');}}>Detail</Nav.Link>
</Nav>

これによって、すぐ動的UIを作ることができます。
hrefの場合、GET要請をしますので、一度refreshになりますが、LinkのTo設定はUIのみ変更することができます。

Routes, Route, Outlet

<Routes>
  <Route path="/" element={<><span>wow</span></>}/>
  <Route path="*" element={<h1>ERROR<h1/>}/>
</Routes>

URL pathがhome linkになり、指定していないkeywordを入力した場合、エラーページComponentに交換されます。

また、一つのRouteをまた、ネストすることもできます。

<Route path="/members" element={<Members/>}>
  <Route path="name" element={<><span>john</span></>}/>
  <Route path="age" element={<><span>15</span></>}/>
</Route>

members/
members/name <- outlet
members/age <- outlet

function Members(){
  return (
    <div>
      <h4>Members</h4>
      <Outlet></Outlet>
    </div>
  )
}