BrowserRouter 尾随 / 导致明显错误

Question

如果我使用像这样没有尾部斜杠的路径 / 我不会收到任何错误...

<Route path = '/confirm_email' component = {Confirm} />

如果我像这样添加尾部斜线

<Route path = '/confirm_email/' component = {Confirm} />

或喜欢

<Route path = '/confirm_email/:test' component = {Confirm} />

甚至喜欢

<Route path = '/confirm_email/:test/' component = {Confirm} />

我在浏览器控制台中得到的错误是 Manifest: Line: 1, column: 1, Syntax error.，当我单击错误时它指向 <!DOCTYPE html> 如果我在页面中添加 console.log()，日志先显示错误再显示。

我发现如果我从 index.html 页面中删除以下代码，错误就会停止。

    <script>
      const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches || false;
      const favicon = document.getElementById('favicon');
      const manifest = document.getElementById('manifest');
      function switchIcon(darkMode) {
        if (darkMode) { 
          favicon.href = 'favicon-dark.ico';
          manifest.href='manifest-dark.json' 
        } else {
        favicon.href = 'favicon-light.ico';
        manifest.href='manifest-light.json' 
        }
      }
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener( "change", (e) => switchIcon(e.matches));
      switchIcon(darkMode);
  </script>

manifest-dark.json的内容是

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }    
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

我最初加载的是浅色版本，然后切换到深色版本。

<link rel="manifest" id='manifest' href="%PUBLIC_URL%/manifest-light.json" />

Answer 1

似乎存在路径问题，因为您在 link 标记中有 href="%PUBLIC_URL%/manifest-light.json" 而在您的 JS 代码中没有 manifest.href='manifest-dark.json'

由于 URL 是从您的构建过程中注入的，因此您也必须将该变量插入您的 JS 代码中。

BrowserRouter 尾随 / 导致明显错误

BrowserRouter with trailing / causes manifest error

reactjs

react-router-v4