zukucode
主にWEB関連の情報を技術メモとして発信しています。
React

React react-router-domの基本的な使い方

React+TypeScriptのプロジェクトにreact-router-domを導入してSPAのアプリケーションを作成する方法を紹介します。

パッケージのインストール

まずはreact-router-domのパッケージをインストールします。

$ npm install react-router-dom

ルーティング設定

次に、URLに対応するコンポーネントを指定します。

以下の例では、/にアクセスしたときはHomeコンポーネントを表示し、/aboutにアクセスしたときはAboutのコンポーネントを表示するように設定しています。

route.tsx
import { Route, Switch } from 'react-router-dom';
import { VFC } from 'react';
import Home from './pages/Home';
import About from './pages/About';

const routes: VFC = () => {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" exact component={About} />
    </Switch>
  );
};

export default routes; // これはNG 
export default routes({});

上記で作成したルーティング設定をBrowserRouterの中に入れて使用します。

App.tsx
import { VFC } from 'react';
import { BrowserRouter } from 'react-router-dom';
import routes from './routes';

const App: VFC = () => {
  return <BrowserRouter>{routes}</BrowserRouter>;
};

export default App;

以下のように１つのファイルで行うことも可能です。

App.tsx
const App: VFC = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" exact component={About} />
      </Switch>
    </BrowserRouter>
  )
};

export default App;

以上で、ルーティングの設定は完了です。

ページ遷移

アプリケーション内のリンクなどをクリックしたときに、別のURLに遷移したい場合があります。

以下のように、Linkコンポーネントを使用すると、通常のリンクボタンの要領で画面遷移が行なえます。

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

// ...省略

<Link to="/">top</Link>
<Link to="/about">about</Link>
React

関連記事