NotFound 在 React 上返回 200 而不是 404 代码

Question

我想让

React

上的网站在用户输入时在

404

页面上返回

NotFound

代码，例如：https://www.pess.org.ua/test。

您可以在https://httpstatus.io/上查看返回代码，这种情况下它会返回代码200。它应该返回 404 代码。

App.tsx

import React, {useEffect} from 'react';
import {Router, useLocation} from 'react-router-dom';
import {renderRoutes} from 'react-router-config';

import HeaderComponent from './components/common/HeaderComponent';
import FooterComponent from './components/common/FooterComponent';
import {createBrowserHistory, createMemoryHistory} from 'history';
import routes from './routes';
import MediaQueryProvider from './utils/MediaQueryProvider';

const isBrowser = typeof window !== 'undefined';

let history: any = {};
history = !isBrowser ? createMemoryHistory() : createBrowserHistory();

const App: React.FC = (props: any) => {
  const Content = () => {
    const location = useLocation();

    useEffect(() => {
      if(location.pathname === '/'
        ||!window
        ||(window && !window.document)
      ) return;
      const el = window && window.document.querySelector('.section-main')!;

      if(el) {
        window.scroll({
          behavior: 'smooth',
          top: el.getBoundingClientRect().height + 90
        })
      }
    }, [location.pathname]);

    return (
      <MediaQueryProvider>
        <div className="App">
          <HeaderComponent {...props} />
          {renderRoutes(routes)}
          <FooterComponent/>
        </div>
      </MediaQueryProvider>
    );
  };

  return (
    <Router history={history}><Content/></Router>
  );
};

export default App;

routes.ts

import PayPage from './views/PayPage';
import NotFoundComponent from './views/common/NotFoundPage';

import MainPage from './views/MainPage';
import {fetchData as mainPageFetchData} from './views/MainPage';
import InsurancePage from './views/InsurancePage';
import TestPayPage from './views/TestPayPage';

const routes: any[] = [
  {
    path: '/',
    component: MainPage,
    fetchData: mainPageFetchData,
    exact: true
  },
  {
    path: '/pay',
    component: PayPage,
    exact: true
  },
  {
    path: '/testpay/:type/:id',
    component: TestPayPage,
    exact: true
  },
  {
    path: '/:name/:id?',
    component: InsurancePage,
    exact: true
  },
  {
    path: "*",
    component: NotFoundComponent
  }
];

export default routes;

保险页面.tsx

import React from 'react';
import Steps from "../components/MainPage/Steps";
import {hasInsurance} from "../mock-data/insuranceTypes";
import {Route} from 'react-router-dom';
import StepsProvider from "../utils/StepsProvider";
import NotFoundComponent from './common/NotFoundPage';

const InsurancePage = (props: any) => {
  const name = props.match.params.name;
  const instance = hasInsurance(name);

  if (instance) {
    return (
      <StepsProvider>
        <Route to={`${props.match.path}/:id?`} component={Steps} />
      </StepsProvider>
    )
  }
  else {
    return (
      <Route component={NotFoundComponent} />
    );
  }
};

export default InsurancePage;

NotFoundPage.tsx

import React from 'react';

const NotFoundComponent = () => {
    return (
        <div>404!!!</div>
    );
};

export default NotFoundComponent;

package.json：

{
  "name": "web-site",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@kunukn/react-collapse": "^2.2.7",
    "@rehooks/window-scroll-position": "^1.0.1",
    "@types/dotenv": "=6.1.1",
    "@types/express": "=4.17.1",
    "@types/js-base64": "=2.3.1",
    "@types/lodash": "=4.14.149",
    "@types/morgan": "=1.7.37",
    "@types/node": "10.17.17",
    "@types/node-fetch": "=2.5.0",
    "@types/node-sass": "=4.11.0",
    "@types/react": "^16.9.16",
    "@types/react-autosuggest": "^9.3.13",
    "@types/react-dom": "16.8.5",
    "@types/react-fontawesome": "=1.6.1",
    "@types/react-helmet": "=5.0.3",
    "@types/react-input-mask": "^2.0.4",
    "@types/react-redux": "^7.1.5",
    "@types/react-router-config": "=5.0.0",
    "@types/react-router-dom": "^5.1.3",
    "@types/react-select": "=3.0.2",
    "@types/uuid": "^3.4.6",
    "@types/whatwg-fetch": "^0.0.33",
    "app-root-path": "^2.0.1",
    "axios": "^0.21.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-import": "^1.12.1",
    "body-parser": "^1.18.2",
    "bootstrap": "^4.3.1",
    "cross-env": "^5.1.3",
    "crypto": "^1.0.1",
    "customize-cra": "^0.6.0",
    "dotenv": "^8.1.0",
    "dotenv-webpack": "^1.7.0",
    "es6-promise": "^4.2.2",
    "express": "^4.17.1",
    "fetch-everywhere": "^1.0.5",
    "file-loader": "^3.0.1",
    "ignore-loader": "^0.1.2",
    "ignore-styles": "^5.0.1",
    "js-base64": "^2.4.3",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "lodash": "^4.17.4",
    "lodash.throttle": "^4.1.1",
    "morgan": "^1.9.1",
    "node-fetch": "^2.6.0",
    "node-sass": "^4.12.0",
    "nodemon": "^1.19.2",
    "odata-query": "6.0.0-1",
    "rc-steps": "^3.5.0",
    "re-reselect": "^3.4.0",
    "react": "^17.0.2",
    "react-app-rewire-less": "^2.1.3",
    "react-app-rewired": "^2.1.3",
    "react-autosuggest": "^10.0.2",
    "react-bootstrap": "^1.0.0-beta.15",
    "react-countdown": "^2.3.2",
    "react-dom": "^17.0.2",
    "react-dropdown-date": "^2.2.7",
    "react-ga": "^2.6.0",
    "react-helmet": "^5.2.0",
    "react-hook-form": "^3.28.2",
    "react-hotjar": "^2.0.2",
    "react-id-generator": "^3.0.0",
    "react-input-mask": "^2.0.4",
    "react-lines-ellipsis": "^0.14.1",
    "react-modal": "^3.11.1",
    "react-modern-calendar-datepicker": "^3.1.6",
    "react-owl-carousel2": "^0.3.0",
    "react-redux": "7.1.3",
    "react-router-config": "^5.1.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.0.1",
    "react-scripts-ts": "2.13.0",
    "react-select": "=3.0.8",
    "react-spinners": "=0.7.1",
    "redux": "=4.0.4",
    "redux-actions": "=2.6.5",
    "redux-thunk": "=2.3.0",
    "reselect": "=4.0.0",
    "serve-favicon": "=2.4.5",
    "ts-loader": "=6.0.4",
    "ts-node": "=8.3.0",
    "use-media": "=1.4.0",
    "use-react-router": "=1.0.7",
    "uuid": "=3.3.3",
    "webpack-cli": "=3.3.8",
    "webpack-node-externals": "=1.7.2",
    "whatwg-fetch": "=3.0.0"
  },
  "scripts": {
    "prestart": "yarn run build",
    "start": "yarn start:server",
    "start:dev": "yarn run build && yarn start:server:dev",
    "start:server": "cross-env NODE_ENV=production ts-node build_server/server.js",
    "start:server:dev": "cross-env NODE_ENV=development ts-node build_server/server.js",
    "start:client": "react-app-rewired start",
    "build:server": "ts-node node_modules/webpack/bin/webpack.js --config webpack.server.config.js",
    "build:client": "react-app-rewired build",
    "build": "yarn run build:client && yarn run build:server",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "=3.5.1",
    "style-loader": "=1.0.0",
    "typescript": "3.5.3"
  }
}

截图：

有什么想法如何从

React

返回 404 代码吗？谢谢你。