web-dev-qa-db-ja.com

REACTの404ページ

コンポーネントNotFoundを作成しましたが、存在しないページに移動すると正常に機能します。しかし、存在しないページだけでなく、すべてのページに同じページが表示されます。これはコンポーネントです：

import React from 'react'

const NotFound = () =>
  <div>
    <h3>404 page not found</h3>
    <p>We are sorry but the page you are looking for does not exist.</p>
  </div>

export default NotFound

そして、これは私がメインページでそれを使用した方法です：

class MainSite extends Component {
  render () {
    return (
      <div>
        {/* Render nav */}
        <Route path='/dashboard' component={Nav} />
        <Route path='/retrospectives' component={Nav} />
        <Route path='/users' component={Nav} />
        <Route path='/projects' component={Nav} />

        {/* Dashboard page */}
        <ProtectedRoute exact path='/dashboard' component={DashboardPage} />

        {/* Retrospectives page */}
        <ProtectedRoute exact path='/retrospectives' component={RetrospectivesPage} />

        {/* Users page */}
        <ProtectedRoute exact path='/users' component={UsersPage} />

        {/* Projects page */}
        <ProtectedRoute exact path='/projects' component={ProjectsPage} />

        {/* Retrospective related pages */}
        <Route exact path='/retrospectives/:retrospectiveId' component={Retrospective} />
        <Route exact path='/join-retrospective' component={JoinRetrospective} />
        <ProtectedRoute exact path='/create-retrospective/:retrospectiveId' component={Retrospective} />

        {/* OnBoarding pages */}
        <ProtectedRoute exact path='/beta-code' component={BetaCodeAccess} />
        <Route exact path='/auth-handler' component={AuthHandler} />
        <Route exact path='/join-organization' component={JoinOrganization} />
      </div>
    )
  }
}

export default MainSite

ご覧のとおり、<Route path="*" component={NotFound} />で404ページを作成しますが、そのコンポーネントは既存のすべてのページにも表示されます。どうすれば修正できますか？

javascriptreactjshttp-status-code-404
7
Liz Parody

これを試してください：

  import { Switch, Route } from 'react-router-dom';

  <Switch>
    <Route path='/dashboard' component={Nav} />
    <Route path='/retrospectives' component={Nav} />
    <Route path='/users' component={Nav} />
    <Route path='/projects' component={Nav} />

    <Route path="" component={NotFound} />
  </Switch>
11
sultan

以下の例はすべて正常に機能します。

<Route path="" component={NotFound} /> // empty ""
<Route path="*" component={NotFound} /> // star *
<Route component={NotFound} /> // without path

または、コンポーネントなしで単純な404メッセージを返したい場合：

<Route component={() => (<div>404 Not found </div>)} />
1
Pedram