在反应中添加404页面（组件）

Question

我是 React 新手（熟悉 Angular），并且正在使用 VisualStudio2022 中的脚手架 React 项目。 我正在尝试添加 404 组件，但无论我尝试什么，我的 404 页面总是会附加到实际页面。

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { NotFound } from './components/NotFound';

import './custom.css'

export default class App extends Component {
    static displayName = App.name;

    render() {
        return (
            <Layout>
                <Route exact path='/' component={Home} />
                <Route path='/counter' component={Counter} />
                <Route path='/fetch-data' component={FetchData} />
                <Route component={NotFound} />
            </Layout>
        );
    }
}

是否可以让我的NotFound 组件仅在没有其他路由匹配时出现？

Answer 1

对于 404 页面，您应该指定 path=*

反应路由器 v6：

    <Route
      path="*"
      element={<NotFound/>}
    />

Source react-router v.6

反应路由器 v5：

  <Route path="*">
    <NotFound/>
  </Route>

Source react-router v.5

您似乎使用 react-router v5，这意味着您应该使用 <Switch> 组件包装您的路由。