React Routing
ReactにおけるRoutingを勉強したのでそのまとめ。
間違ってる箇所あったら教えてください...
前提
ReactはSPA(Single Page Application)。
その特徴として、最初にページをサーバーから持ってくる。あとはjsを使って、中身のレンダリングを行い表示を更新していくことでページの更新を高速化している。
Reactの特徴をうまく使うためには、Routingするためのライブラリをインストールして使う必要あり。
プロジェクトはnpx create-react-appでセットアップ。
使うLibrary: react-router-dom
ライブラリをインストールして、dependenciesに追加。
手順的な
1.インストールしたreact-domからBrowserRouterをインポートして、アプリ全体を囲う(index.js)。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
document.getElementById('root')
);
-
RouteをApp.jsにインポートして、それぞれのページへのルートを設定する。
<Route exact path='/' component={SomeComponent}>
exact -> pathと完全一致するものをレンダリング
path -> パスとなるurlの設定。'/'はベースurl
component-> レンダリングしたいコンポーネントを渡す
App.js
import { Route } from 'react-router-dom';
const Home = () => {
return (
<div>
<h1>HOME PAGE</h1>
</div>
);
};
const PageA = () => {
return (
<div>
<h1>PAGE A</h1>
</div>
);
};
function App() {
return (
<div className='App'>
<Route exact path='/' component={HomePage} />
<Route path='/pageA' component={PageA} />
</div>
);
}
export default App;
-
Switchコンポーネントを使い、全てのRouteコンポーネントを囲うことで、より正確なレンダリングができる。
マッチしたうちの一つのコンポーネントだけレンダリングし、他はしないため。(Routeだけ使って、exactを使わないと二つのコンポーネントをレンダリングしたりする...)
import { Switch, Route } from 'react-router-dom';
//省略
function App() {
return (
<div className='App'>
<Switch>
<Route exact path='/' component={HomePage} />
<Route path='/pageA' component={PageA} />
</Switch>
</div>
);
}
export default App;
Dynamic Routing
Routeによりレンダリングされる全てのコンポーネントには3つの引数がpropsとして渡される。(history, location,match)
そのpropsをコンソールログするとこんな感じになる。
{
{
"history": {
"length": 22,
"action": "PUSH",
"location": {
"pathname": "/topics/21",
"search": "",
"hash": "",
"key": "vmo1ru"
}
},
"location": {
"pathname": "/topics/21",
"search": "",
"hash": "",
"key": "vmo1ru"
},
"match": {
"path": "/topics/:topicId",
"url": "/topics/21", //マッチしてる部分のみ
"isExact": true, // もしurlが全てマッチしてればtrue
"params": {
"topicId": "21" //dynamic id.これを下に情報をフェッチしてコンポーネントレンダリングできたりする。
}
}
}
}
import { Switch, Route } from 'react-router-dom';
const HomePage = (props) => {
console.log('homepage: ', props);
return (
<div>
<h1>HOME PAGE</h1>
</div>
);
};
const TopicsList = (props) => {
console.log('topicsList: ', props);
return (
<div>
<h1>Topic List Page</h1>
</div>
);
};
const TopicDetail = (props) => {
console.log('Rendering topicDetail...');
console.log('topicDetail: ', props.match.params.topicId);
return (
<div>
<h1>Topic Detail Page: {props.match.params.topicId}</h1>
</div>
);
};
function App() {
return (
<div>
<Route exact path='/' component={HomePage} />
<Route path='/topics' component={TopicsList} />
<Route path='/topics/:topicId' component={TopicDetail} />
</div>
);
}
export default App;
Link Component
import { Route, Link } from 'react-router-dom';
//省略
function App() {
return (
<div>
<Link to='/topics'>Link</Link>
<Route exact path='/' component={HomePage} />
<Route path='/topics' component={TopicsList} />
<Route path='/topics/:topicId' component={TopicDetail} />
</div>
);
}
export default App;
Link と Route の違いは？
Linkコンポーネント: アプリ全体を再レンダリングするようにリダイレクトする。
Routerコンポーネント: URLを借りてアプリにどの部分を再レンダリングすべきか伝える。
他のdynamic routing
History propsを使う
(Linkと同等だが、イベント発生時に動的にurl作れたりする)
const Button = (props) => {
return <button onClick={() => props.history.push('/topics')}>button</button>;
};
function App() {
return (
<div>
<Button />
</div>
);
}
export default App;
Linkコンポーネントを使って動的にurl作る
import { Switch, Route, Link } from 'react-router-dom';
const HomePage = (props) => {
console.log('homepage: ', props);
return (
<div>
<h1>HOME PAGE</h1>
</div>
);
};
const TopicsList = (props) => {
console.log('topicsList: ', props);
return (
<div>
<h1>Topic List Page</h1>
<Link to={`${props.match.url}/13`}>To Topic 13</Link>
<Link to={`${props.match.url}/17`}>To Topic 17</Link>
<Link to={`${props.match.url}/21`}>To Topic 21</Link>
</div>
);
};
const TopicDetail = (props) => {
console.log('topicDetail: ', props);
return (
<div>
<h1>Topic Detail Page : {props.match.params.topicId}</h1>
</div>
);
};
const Button = (props) => {
return <button onClick={() => props.history.push('/topics')}>button</button>;
};
function App() {
return (
<div>
<Button />
<Link to='/topics'>Link</Link>
<Route exact path='/' component={HomePage} />
<Route path='/topics' component={TopicsList} />
<Route path='/topics/:topicId' component={TopicDetail} />
</div>
);
}
export default App;
参考
以下のudemyの動画にてReactの勉強中です。