如何在 React 中为单页滚动应用程序添加 404 页面？

Question

我是 React 的新手，正在尝试将 404 页面添加到我的 SPSA。这就是我的 index.js 的样子：

import React from 'react';
import ReactDOM from 'react-dom';
import './dist/css/main.css';
import './../node_modules/react-fancybox/lib/fancybox.css';
import Nav from './js/Components/Nav';
import * as serviceWorker from './serviceWorker';
import Landing from './js/Layout/Landing';
import Overview from './js/Layout/Overview';
import Solutions from './js/Layout/Solutions';
import Games from './js/Layout/Games';
import Platforms from './js/Layout/Platforms';
import Focus from './js/Layout/Focus';
import News from './js/Layout/News';
import Contact from './js/Layout/Contact';
import Catalogue from "./js/Layout/Catalogue";
import Game from "./js/Components/PlayGame";
import NotFound from "./js/Layout/NotFound";
import { BrowserRouter as Router, Route, withRouter } from "react-router-dom";

const base_url = process.env.PUBLIC_URL;

ReactDOM.render(
    <Router>
        <div>
            <Route path={`${base_url}/`} component={withRouter(Nav)} />
            <Route exact path={`${base_url}/`} component={withRouter(Landing)} />
            <Route exact path={`${base_url}/`} component={withRouter(Overview)} />
            <Route exact path={`${base_url}/`} component={withRouter(Solutions)} />
            <Route exact path={`${base_url}/`} component={withRouter(Games)} />
            <Route exact path={`${base_url}/`} component={withRouter(Platforms)} />
            <Route exact path={`${base_url}/`} component={withRouter(Focus)} />
            <Route exact path={`${base_url}/`} component={withRouter(News)} />
            <Route exact path={`${base_url}/`} component={withRouter(Contact)} />
            <Route exact path={`${base_url}/catalogue`} component={withRouter(Catalogue)} />
            <Route exact path={`${base_url}/game/:gameid`} component={withRouter(Game)} />
            <Route component={withRouter(NotFound)} />
        </div>
    </Router>
    , document.getElementById('root'));
serviceWorker.unregister();

我四处搜索，发现我应该在我的路由器中使用 <Switch>，但是添加 <Switch> 会使我的网页变成空白并且什么也没有显示。目前我的方式是，未找到的页面显示在我的滚动条底部，而我只希望它在用户输入错误时出现 URL。我的路由应该在哪里或如何实现，以便我仅在用户导航到错误的 URL 并且在我的滚动应用程序主页中始终没有它时才呈现 404 页面？任何帮助，将不胜感激。谢谢。

更新

已尝试执行以下操作：

<Router>
    <Switch>
        <Route path={`${base_url}/`} component={withRouter(Nav)} />
        <Route exact path={`${base_url}/`} component={withRouter(Landing)} />
        <Route exact path={`${base_url}/`} component={withRouter(Overview)} />
        <Route exact path={`${base_url}/`} component={withRouter(Solutions)} />
        <Route exact path={`${base_url}/`} component={withRouter(Games)} />
        <Route exact path={`${base_url}/`} component={withRouter(Platforms)} />
        <Route exact path={`${base_url}/`} component={withRouter(Focus)} />
        <Route exact path={`${base_url}/`} component={withRouter(News)} />
        <Route exact path={`${base_url}/`} component={withRouter(Contact)} />
        <Route exact path={`${base_url}/catalogue`} component={withRouter(Catalogue)} />
        <Route exact path={`${base_url}/game/:gameid`} component={withRouter(Game)} />
        <Route path="*" exact={true} component={withRouter(NotFound)} />
    </Switch>
</Router>

它只显示导航栏，其他什么都没有，其余都是空白。当我导航到 /catalogue 页面时，它也显示为空白。 URL 正在更改，但未在视图中显示任何内容。

解决方案

按照@Craig 的解释，以下内容对我有用：

<Router>
    <div>
        <Route path={`${base_url}/`} component={withRouter(Nav)} />
        <Switch>
            <Route exact path={`${base_url}/`} render={() => (
                    <div>
                        <Landing/>
                        <Overview/>
                        <Solutions/>
                        <Games/>
                        <Platforms/>
                        <Focus/>
                        <News/>
                        <Contact/>
                    </div>
                )} />
            <Route exact path={`${base_url}/catalogue`} component={withRouter(Catalogue)} />
            <Route exact path={`${base_url}/game/:gameid`} component={withRouter(Game)} />
            <Route path="*" component={withRouter(NotFound)} />
        </Switch>
    </div>
</Router>

Answer 1

将 <div> 替换为 <Switch>。当您尝试添加 <Switch> 时，听起来您将 <div> 作为 <Switch> 的子项，然后将所有 <Route> 组件置于 div 之下。如果需要，您可以将 div 移到路由器之外。

All children of a <Switch> should be <Route> or <Redirect> elements.

https://reacttraining.com/react-router/core/api/Switch/children-node

更新

将您的新代码更改为：

<Router>
  <div>
    <Route path={`${base_url}/`} component={withRouter(Nav)} />
    <Switch>
        <Route exact path={`${base_url}/`} component={withRouter(Landing)} />
        <Route exact path={`${base_url}/`} component={withRouter(Overview)} />
        <Route exact path={`${base_url}/`} component={withRouter(Solutions)} />
        <Route exact path={`${base_url}/`} component={withRouter(Games)} />
        <Route exact path={`${base_url}/`} component={withRouter(Platforms)} />
        <Route exact path={`${base_url}/`} component={withRouter(Focus)} />
        <Route exact path={`${base_url}/`} component={withRouter(News)} />
        <Route exact path={`${base_url}/`} component={withRouter(Contact)} />
        <Route exact path={`${base_url}/catalogue`} component={withRouter(Catalogue)} />
        <Route exact path={`${base_url}/game/:gameid`} component={withRouter(Game)} />
        <Route path={"*"} exact={true} component={withRouter(NotFound)} />
    </Switch>
  </div>
</Router>

开关将只渲染第一个匹配项。

Answer 2

在您的开关中添加以下代码，如下所示：

 <Switch>
    /* All your routes here */
    <Route path='*' component={AppFallbackComponent} />
  </Switch>

它所做的是，当 URL 中的路径与上述任何配置的路由都不匹配时，它会为所有场景呈现组件 AppFallbackComponent。这可用于所有此类场景和 404 等。

记住，我提到的路由应该添加为交换机内部的最后一条路由，这意味着回退将在 React 路由器匹配上面定义的所有路由后执行。

如何在 React 中为单页滚动应用程序添加 404 页面？

How to add a 404 page to Single Page Scrolling App in React?

reactjs

react-router-v4

更新