React router でホームしか表示されない。

routerでルートのページしか表示されない。

最初は以下のように書いていました。 /event にアクセスしてもホームが表示されてしまいます。

app.js

<Switch>
    <Route path="/" component={Home} />
    <Route path="/event" component={Event} />
</Switch>

以下のように Route の中にexact を追加したら動作しました。

app.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
import EventDetailScreen from './screens/EventScreen';

export default function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/event" component={Event} />
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <HomeScreen />;
}

function EventDetail() {
  return <EventScreen />;
}

なぜ？

exact は完全一致をさし、 exact が指定されていない場合は部分一致となります。そのため、"/event"
にアクセスしても "/" が含まれているためホームが表示されたようです。

参考