react-routerで画面遷移がうまくできません

Question

react-routerで画面遷移をしようとしています。

import * as React from 'react';
import {
  BrowserRouter as Router,
  Link,
  Route,
  Switch,
} from 'react-router-dom';
import './App.css';

const App = () => (
  <Router>
    <Switch>
      <Route expect={true} path="/" component={TopPage} />
      <Route path="/sub/:id" component={SubPageDetail} />
    </Switch>
  </Router>
);

const TopPage = () => (
  <div>
    <div>Top Page Component</div>
    <SubPage />
  </div>
);

const SubPage = () => (
  <div>
    <Router>
      <div>
        <Link to="/sub/1"> sub1 </Link> <br />
        <Link to="/sub/2"> sub2 </Link>
      </div>
    </Router>
  </div>
);

const SubPageDetail = (props: any) => (
  <div>
    Sub Page Detail {props.match.id}
  </div>
);
export default App;

上記のコードでsub1のリンクをクリックしたときにページに「Sub Page Detail 1」と表示されて欲しいのですが、うまくいきません。

どこを修正すればいいのでしょうか。

Answer 1

<Route exact={true} path="/" component={TopPage} />

expectではなく、exactでは？