React Router Url 在运行 npm serve 之后显示空白页面

Question

我对运行ning npm serve for a static React SPA 有疑问。我相信它与 react-router.

中的 react-router-dom 有关

下面是包裹json

 {
  "name": "eureka-customer-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.7.1",
    "@webstudio/buttons": "^5.3.2",
    "@webstudio/checkbox": "^2.1.6",
    "@webstudio/icons": "^5.0.4",
    "@webstudio/inputs": "^4.11.0",
    "@webstudio/theme-dbs": "^2.0.1",
    "@webstudio/tooltip": "^2.3.1",
    "@webstudio/typography": "^1.0.3",
    "axios": "^0.24.0",
    "formik": "^2.2.9",
    "html-react-parser": "^1.4.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.3",
    "yup": "^0.32.11"
  },
  "scripts": {
    "clean": "rm -rf build && rm -rf node_modules",
    "lint": "eslint './src/**/*.{js,ts,tsx}' --max-warnings 5",
    "start": "react-scripts start ",
    "build:clean": "rm -rf build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "setup": "npm ci",
    "preinstall": "npx npm-force-resolutions",
    "package": "cd build && zip -r ../$BUILD_ENV.zip *",
    "copy:static": "cp Staticfile build",
    "serve": "npx serve -s build -l 5000"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ],
    "rules": {
      "import/no-anonymous-default-export": "off"
    }
  },
  "eslintIgnore": [
    "src/components/DBSDefault/*.tsx"
  ],
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^13.1.5",
    "@types/jest": "^24.9.1",
    "@types/node": "^16.11.19",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.9",
    "@types/react-helmet": "^6.1.5",
    "@types/styled-components": "^5.1.19",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "^4.17.0",
    "@typescript-eslint/parser": "^4.17.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-cypress": "^2.11.2",
    "eslint-plugin-jest": "^24.2.1",
    "eslint-plugin-prettier": "^3.3.1",
    "local-web-server": "^5.1.1",
    "serve": "^13.0.2",
    "typescript": "^4.4.4",
    "ws": "^8.5.0"
  }
}

在运行ning npm 运行 build 和 npm 运行 serve 之后，我是无法命中我的路由中定义的 PATH，例如 localhost:5000/personal/cards/subscription/signup。我得到的是空白页。

下面是我的路由组件的片段

import ConfirmationPage from "pages/ConfirmationPage";
import SignUpForm from "pages/SignUpForm";
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";

export default () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/personal/cards/subscription/signup"
          element={<SignUpForm />}
        />
        <Route
          path="/personal/cards/subscription/confirm"
          element={<ConfirmationPage />}
        />
      </Routes>
    </BrowserRouter>
  );
};

有什么想法吗？谢谢！

Answer 1

通过将 BrowserRouter 替换为 HashRouter 解决了这个问题。

React Router Url 在运行 npm serve 之后显示空白页面

React Router Url displays blank page after running npm serve

reactjs

react-router

serve

react-router-dom

React Router Url 在 运行 npm serve 之后显示空白页面

React Router Url displays blank page after running npm serve

reactjs

react-router

serve

react-router-dom

React Router Url 在运行 npm serve 之后显示空白页面