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

将<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="google" content="notranslate"> <title>Typing Accuracy Test</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Typing Accuracy Test</h1> <h2 id="checking">lorem ipsum dolor sit amet, tritani debitis ea ius, nostrud albucius vis eu. civibus consequuntur cum ut, te albucius accusamus per, illum nominati temporibus nec eu. adversarium efficiantur ei qui. at vix falli tollit. an graece vituperata vix, iusto primis ponderum id eum, delenit definiebas vix in.</h2> <h3 id="correct"></h3> <h3 id="wrong"></h3> <script src="script.js"></script> </body> </html>替换为<div>。当您尝试添加<Switch>时，听起来好像您将<Switch>作为<div>的子级，然后将所有<Switch>组件归于div。如果需要，可以将div移出路由器。

<Route>的所有子代应为<Switch>或<Route>元素。

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

更新

将新代码更改为此：

<Redirect>

该开关将仅显示第一个匹配项。

Answer 2

在交换机内部添加以下代码，如下所示：

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

它的作用是，当URL中的路径与上面配置的任何路由都不匹配时，它将为所有情况呈现组件AppFallbackComponent。这可以用于所有此类情况以及404等。

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

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

2 个答案:

更新