##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"
にアクセスしても "/" が含まれているためホームが表示されたようです。