[解決済み] react router v4 default page(ページが見つかりません)

質問

これは共通の目的で、マッチしないリクエストをnotfoundのページに誘導するものです。

react-router v4で作ると、以前のバージョンと同じように見えるので、このサンプルは以下のように動作すると思います。 サンプルは以下のように動作します。リンクは正常に動作しますが、私はNotFoundコンポーネントが要求された未知のURLのみ呼び出されることを期待; しかし、それは常にそこにある。

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'


class Layout extends Component {
  render() {
    return (
    <Router>
      <div className="App">
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/user">User</Link></li>
        </ul>
        <Route exact path="/" component={Home}/>
        <Route path="/user" component={User}/>
        <Route path="*" component={Notfound}/>
      </div>
  </Router>
    );
  }
}

以来 path="*" はすべてのリクエストを表し、notfoundコンポーネントは常に存在しますが、どのように私は有効なURLパスのためにこのコンポーネントを非表示にすることができますか？

どのように解決するには？

React Routerの マッチしない ドキュメント がカバーしています。をインポートする必要があります。 <Switch> コンポーネントをインポートし、次に path 属性を完全に削除することができます。

A <Switch> は、最初の子である <Route> にマッチする最初の子プロセスを描画します。A <Route> は常に

を使う例です。

<Router>
  <div>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <Route component={NoMatch}/>
    </Switch>
  </div>
</Router>

つまり、あなたの場合、単純に path="*" を削除し <Switch> :

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/user" component={User}/>
  <Route component={Notfound} />
</Switch>

忘れずに Switch を追加してください。 import ステートメントを追加します。