Zenn
🦁

[React]Router使い方

2023/07/19に公開
React
初心者
#
JSX
#
router
tech

Router


routerはページを分けたいときに使います。
routerを使用するには、まずインストールする必要があります。



初期セッティング

1. まずターミナルを開き、コマンドを入力します。

npm install react-router-dom@6



2. index.jsでタグを追加してください。

index.js
import { BrowserRouter } from 'react-router-dom';

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



ページ分け

url経路によって異なるページを表示したい場合は、Routeタグを使用することができます。

App.js
import { Routes, Route } from 'react-router-dom'

function App(){
  return (
    <Routes>
      <Route path="" element={  } />
      <Route path="" element={  } />
    </Routes>
  )
}



pathにはurl経路、elementには見せるhtmlが入ります。

例

App.js
    <Routes>
      <Route path="/study" element={ <div><p>studyページです</p></div> } />
      <Route path="/practice" element={ <div><p>practiceページです</p></div> } />
    </Routes>


サブ経路は "/名" でできます。

 <Route path="/study" element={ <p>studyページ</p> } />
 <Route path="/study/math" element={ <p>mathページ</p> } />
 <Route path="/study/history" element={ <p>historyページ</p> } />


でも上よりはこちらの方がもっと見やすいですね。
これをNested routesと呼びますけど、この時mathに入るとstudyページとmathページが両方出力されます。

 <Route path="/study" element={ <p>studyページ</p> } >
    <Route path="/study/math" element={ <p>mathページ</p> } />
    <Route path="/study/history" element={ <p>historyページ</p> } />
 </Route>


でも今はhttp://localhost:3000/study/math　に入ってもstudyページしか出力されています。
Nested routesを使うためにはOutletタグを使わなければなりません。
そのためには上位パスのhtmlをコンポーネントに変更します。

 function Study(){
  return (
    <div>
      <h4>studyページ</h4>
    </div>
  )
}



そしてOutletをimportします。
上位パスのコンポーネントにOutletタグを入れます。
Outletには下位経路にhtmlが入ります。

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


 function Study(){
  return (
    <div>
      <h4>studyページ</h4>
      <Outlet></Outlet>
    </div>
  )
}



ただ "/" だけならmainページです。

 <Route path="/" element={ <p>mainページ</p> } />


間違ったurlを入力したとき見せるページは*です。

 <Route path="*" element={ <p>404</p> } />

この中には他のReact関数と同じくdivとか空いたタグで全体たぐを包んでください。




ページ移動

じゃあurl経路で様々のhtmlを見られますけどurlに直接打つ方法以外にどう移動するのか。



Linkはaタグと同じだと考えてもいいです。
文字をクリックすると移動します。

import { Routes, Route, Link } from 'react-router-dom' //Linkを追加


<Link to="/">main</Link>
<Link to="/study">studyページ</Link>



2. useNavigate

まずuseNavigateをimportして関数を作ってください。
その関数をonClickに入れてください

import { Routes, Route, Link, useNavigate } from 'react-router-dom' //useNavigateを追加

function App(){
  let navigate = useNavigate()
  
  return (
    <button onClick={()=>{ navigate('/study') }}>study</button>
  )
}

以上でポスティングを終わります。

Discussion