Gatsby 的内部路由器存在特殊字符问题

Mat*_*zen 5 url internationalization reactjs gatsby reach-router

我遇到了一个问题,我的页面matchPath设置为/*.

这适用于 URL 中没有特殊字符的内容,例如我的条款页面。但是,对于URL 中带有特殊字符的测试页面,它会短暂加载(表明它已正确找到该页面),但随后 Gatsby(很可能是 Reach Router)加载了 404。

这可能是什么原因?我不确定我是否发现了错误,或者我做错了什么。

我正在使用盖茨比 2。

这是我的package.json

{
  "dependencies": {
    "@azure/core-http": "^1.2.3",
    "@babel/core": "^7.11.1",
    "@fluffy-spoon/name-of": "^1.4.0",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/styles": "^4.11.3",
    "@monaco-editor/react": "^3.6.2",
    "@nivo/line": "^0.63.1",
    "@reach/router": "^1.3.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@types/moment": "^2.13.0",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
    "@typescript-eslint/eslint-plugin": "^4.2.0",
    "@typescript-eslint/parser": "^4.2.0",
    "acorn": "^7.4.0",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.2",
    "blurhash": "^1.1.3",
    "camelcase": "^5.3.1",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "chart.js": "^2.9.3",
    "clipboard-copy": "^3.1.0",
    "devtools-detect": "^3.0.1",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^7.10.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.21.2",
    "eslint-plugin-react-hooks": "^4.1.2",
    "file-loader": "4.3.0",
    "file-saver": "^2.0.5",
    "fs-extra": "^8.1.0",
    "gatsby": "^2.27.0",
    "gatsby-image": "^2.6.0",
    "gatsby-plugin-create-client-paths": "^2.5.0",
    "gatsby-plugin-lodash": "^3.5.0",
    "gatsby-plugin-material-ui": "^2.1.10",
    "gatsby-plugin-react-helmet": "^3.5.0",
    "gatsby-plugin-robots-txt": "^1.5.3",
    "gatsby-plugin-s3": "^0.3.8",
    "gatsby-plugin-sass": "^2.6.0",
    "gatsby-plugin-sharp": "^2.9.0",
    "gatsby-plugin-sitemap": "^2.7.0",
    "gatsby-plugin-styled-components": "^3.5.0",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-source-filesystem": "^2.6.1",
    "gatsby-source-mongodb": "^2.5.0",
    "gatsby-transformer-remark": "^2.11.0",
    "gatsby-transformer-sharp": "^2.7.0",
    "google-map-react": "^2.1.9",
    "html-webpack-plugin": "4.0.0-beta.11",
    "i18next": "^19.7.0",
    "lodash": "^4.17.20",
    "materialui-daterange-picker": "^1.1.92",
    "mini-css-extract-plugin": "0.9.0",
    "moment": "^2.27.0",
    "monaco-react": "^1.1.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.6.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.13.1",
    "react-blurhash": "^0.1.3",
    "react-dev-utils": "^10.2.1",
    "react-dom": "^16.13.1",
    "react-dropzone": "^11.2.0",
    "react-helmet": "^6.1.0",
    "react-hotkeys-hook": "^2.3.1",
    "react-i18next": "^11.7.2",
    "react-refresh": "^0.8.3",
    "resolve": "1.15.0",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^9.0.3",
    "stacktrace-js": "^2.0.2",
    "style-loader": "0.23.1",
    "styled-components": "^5.2.0",
    "terser-webpack-plugin": "2.3.4",
    "ts-pnp": "1.1.5",
    "url-loader": "2.3.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "4.3.1"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^2.1.0",
    "@cloudflare/wrangler": "^1.15.1",
    "@types/devtools-detect": "^3.0.0",
    "@types/file-saver": "^2.0.1",
    "@types/google-map-react": "^2.1.0",
    "@types/googlemaps": "^3.43.2",
    "@types/jest": "^26.0.14",
    "@types/lodash.debounce": "^4.0.6",
    "@types/react-helmet": "^6.1.0",
    "@types/stacktrace-js": "^2.0.3",
    "autorest": "^3.1.5",
    "babel-jest": "^26.3.0",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-styled-components": "^1.11.1",
    "babel-preset-gatsby": "^0.5.13",
    "bundlewatch": "^0.3.2",
    "gatsby-plugin-csp": "^1.1.3",
    "gatsby-plugin-manifest": "^2.12.0",
    "gatsby-plugin-react-svg": "^3.0.1",
    "gatsby-plugin-s3": "^0.3.5",
    "gatsby-plugin-scss-typescript": "^4.0.13",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.4.2",
    "node-sass": "^4.14.1",
    "react-scripts": "^3.4.3",
    "react-test-renderer": "^16.13.1",
    "sass": "^1.32.2",
    "shx": "^0.3.2",
    "typescript": "^4.1.3",
    "typescript-plugin-css-modules": "^2.7.0",
    "webpack": "^4.44.2"
  }
}
Run Code Online (Sandbox Code Playgroud)