この記事では、create-react-app でアプリ作成後、React-Router-dom ver 6 を使ったルーティングの基本的な使い方を確認することができます。
アプリ作成とパッケージをインストール
react アプリを作成します。
create-react-app アプリ名
react-router-dom パッケージをインストールします。
npm install react-router-dom
ファイル構成
src//
|-- components//
| |-- about.js
| `-- contact.js
|-- App.js
`-- index.js
ルーティング
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import About from './components/about';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
<BrowserRouter>、 <Routes>、 <Route> コンポーネント を使用します。これで、<App/> ( / )、 <About/> ( /about ) へのルーティングができました。
Link
import { Link } from 'react-router-dom'
function App() {
return (
<div className="App">
<nav>
<Link to="/">root</Link>
<Link to="/about">about</Link>
</nav>
<main>
</main>
<footer></footer>
</div >
);
}
export default App;
1: Link コンポーネントに飛び先を指定 ( to ) すると、<a> タグが生成され、タップして別のページに移動できるようになります。
Navigate
import { useNavigate } from 'react-router-dom'
export default function About() {
const navigate = useNavigate();
const submit = () => {
navigate('/')
}
return (
<>
<div>About</div>
<button onClick={submit}>Submit</button>
</>
)
}
useNavigate コンポーネントを使うと、ある処理をした後に、指定のページに redirect をすることができます。
navigate(-1) 値に-1 を指定すると、戻るボタンを押すのと同じになります。
ネストとパラメータの取得
index.js ファイルを書き換えます。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import About from './components/about';
import Contact from './components/contact';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} >
<Route path="contact/:id" element={<Contact />} />
</Route>
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
ネストされた <Contact /> は、親コンポーネントの <App /> の中でレンダリングされます。
15: ( :id
) は動的なパラメータで、<Contact />内で取得することができます。この例では、1 のパラメータを取得しています。
<Contact/> がレンダリングされる場所
import { Link, Outlet } from 'react-router-dom'
function App() {
return (
<div className="App">
<nav>
<Link to="/">root</Link>
<Link to="/about">about</Link>
<Link to="/contact/1">contact</Link>
</nav>
<main>
<Outlet context={100}></Outlet>
</main>
<footer></footer>
</div >
);
}
export default App;
1 , 16 : <App /> 内の Outlet コンポーネントの場所に、 <Contact /> の内容が表示されます。
10 : <Contact/> 表示用のLink を追加します。
16 : Outlet コンポーネントからも値を送ることができます。
<Contact/>内で値を取得する
import { useOutletContext, useParams } from "react-router-dom"
export default function Contact() {
const params = useParams();
const context = useOutletContext();
console.log(params.id) // 1
console.log(context) // 100
return (
<div>Contact {params.id}</div>
)
}
useParams() で url のパラメータ、useOutletContext() で <Outlet/> で指定した値を取得することができます。
以上基本的な使い方です。
おまけ
NavLink コンポーネントを使用すると、リンクが active かどうか取得することができます。以下の例では、active なリンクの色を赤色にする例です。
import { NavLink, Outlet } from 'react-router-dom'
function App() {
let active = {
color: 'red'
}
return (
<div className="App">
<nav>
<NavLink style={({ isActive }) => isActive ? active : undefined} to="/">root</NavLink>
<NavLink style={({ isActive }) => isActive ? active : undefined} to="/about">about</NavLink>
<NavLink style={({ isActive }) => isActive ? active : undefined} to="/contact/1">contact</NavLink>
</nav>
<main>
<Outlet context={100}></Outlet>
</main>
<footer></footer>
</div >
);
}
export default App;
createBrowserRouter()ルーティングを書き換え
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import About from './components/about';
import Contact from './components/contact';
const router = createBrowserRouter([
{
path: "/",
element: <App />,
children: [
{
path: "contact/:id",
element: <Contact />,
},
],
},
{
path: "about",
element: <About />
}
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<RouterProvider router={router} />
);
このようにも書き換えることができ、ルーティングが増えても見やすいです。