React Router

install

$ yarn add react-router-dom

$ yarn add -D @types/react-router-dom

使い方

code:ts

import {

BrowserRouter as Router,

Switch,

Route,

Link

} from "react-router-dom";

各ページのcomponent

App.tsx

code:tsx

<BrowserRouter>

<Switch>

<Route exact path="/" component={Welcome} />

<Route path="/foo" component={Foo} />

<Route path="/404" component={Page404} />

<Route component={Page404} />

</Switch>

</BrowserRouter>

Routerの設定

code:tsx

<Route path="detail/:id" component={Detail} />

関数 componentの設定

code:tsx

export const Detail = () => {

const { id } = useParams<{id: string}>();

// 略

}

References

公式ガイド