时间戳

首页 > 解决方案 > 404页面不适用于反应中的嵌套路由

reactjs - 404页面不适用于反应中的嵌套路由

问题描述

我目前正在使用 React 开发一个笔记应用程序，并且我已经构建了一个 404 页面，现在如果我转到一个不存在的路线，它会显示一个 404 页面，例如，如果我转到该路线，/get-the-note/我会得到一个 404页。但问题是我有一条路线：

<Route exact path="/single-note/:id" component={Singlenote}></Route>

这需要一个 id 并且如果我输入正确的 id 就像我有一个带有 id no 的便条2并且如果我去路线/single-note/2它可以工作但是如果我输入一个不存在的 id 就像我输入一个120不存在的 id然后我转到/single-note/120我得到一个普通页面而不是 404 页面的路线。即使 id 不正确，我也希望它显示 404 页面

这是我的 app.js 文件：

import "./App.css";
import Homepage from "./components/homepage.component";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import Singlenote from "./components/singlenote.component";
import PageNotFound from "./components/404_page";

function App() {
    return (
        <Router>
            <Switch>
            <Route exact path="/" component={Homepage} />
            <Route exact path="/single-note/:id" component={Singlenote}></Route>
            <Route path="*"><PageNotFound /></Route>
            </Switch>
        </Router>
    );
}

export default App;

这是我的 404 页面：

import React from 'react'

const PageNotFound = () => {
    return (
        <div id="wrapper">
            <img src="https://i.imgur.com/qIufhof.png" />
            <div id="info">
                <h3>This page could not be found</h3>
            </div>
        </div >
    )
}

export default PageNotFound

标签： reactjs

解决方案

路由器无法知道哪些 ID 存在和不存在。

Singlenote如果没有这样的 ID，则由您来呈现 404 内容。

顺便说一句，对于 Switch 中的最后一条路由，您根本不需要路径。

<Route component={PageNotFound} />

推荐阅读