在 React.js 中，如果一旦我访问 URL (www.place/subd/ping) 中的子目录，BrowserRouter 会引发“SyntaxError: Unexpected token '<'"

Question

我正在使用 React.js (+ Typescript) 制作一个网站，并且我有一个 Unity WebGL 版本，可以很好地工作。 [编辑 1] 该网站是使用 create-react-app 构建的，并在此场景中本地托管。 （https://localhost:3001） [编辑 2] 通过简单的

npm run start

在 WebStorm 上运行。

index.html 连接到 App.tsx。

我现在在网站上添加了一个路由器。

路由：“website.com/”、“website.com/ping”、“website.com/ping/”。

第一条路线工作正常，第二条路线工作正常，但是当我添加另一个斜杠时 - 创建一个我不理解的某种子目录 - 一切都中断了。

我连续三次重复该错误：

SyntaxError: Unexpected token '<'

然后我打开 DevTools，检查问题。 出现两个错误，特别是这个错误很重要：

Build WebGL.loader.js:1 Uncaught SyntaxError: Unexpected token '<' (at Build WebGL.loader.js:1:1)

[编辑 2]（请注意，WebGL 似乎与该问题本质上无关。）

我认为这最终与正斜杠有关，最终，我发现了一个有用的提示：

在图片中，有 2 个 DevTools 的“源”选项卡的快照。 首先是我尝试加载“website.com/ping”。 第二个是我尝试加载“website.com/ping/”。 第二个快照显示 Unity WebGL 构建文件的路径混乱！

这是一些相关代码：

（摘自 App.tsx）

enum gameIds{
    INSOMNIAC_MOLES = "GAME-INSOMNIAC_MOLES",
}

interface GameSegmentProps{
    gameId: string;
}

const GameSegment = ({gameId}: GameSegmentProps) => {
    return <div>W.I.P: Game: {gameId}</div>;
};

<BrowserRouter>
    <Routes>
        <Route path="/" element={<WipSegment/>} />
        <Route path="/ping" element={<div>Pong!</div>} />
        <Route path="/test" element={<GameSegment gameId={gameIds.INSOMNIAC_MOLES}/>} />
        <Route path="/games/insomniac_moles" element={<GameSegment gameId={gameIds.INSOMNIAC_MOLES}/>} />
        <Route path="*" element={<p>hhjalp</p>} />
    </Routes>
</BrowserRouter>

相关错误的快照： [编辑1]

我该怎么办？

Answer 1

明白了！ 我所做的是使用相对路径，而不是绝对路径，来加载 WebGL 游戏。 这个问题在于对 JS 的理解不好，而且令人惊讶的是，我没有发布足够的细节来辨别这个问题。

在我将其标记为正确之前，最好等待验证。

考虑到 4 个 WebGL 游戏都在

/public/Game Datas/Insomniac Moles/Build/...

中，我还没有意识到 LEADING SLASH 至关重要。 如果路径以

public

而不是

/public

开头，就像我所做的那样，路径将是相对的。 在这种情况下，似乎与

localhost:3001/ping/

有关。

如果我将电话发给 useUnityContext()：

，这

将会在这里被辨别出来。

const { unityProvider, sendMessage, addEventListener, removeEventListener,  } = useUnityContext({
        loaderUrl: insomniacMolesDirectory + insomniacMolesFileName + ".loader.js",
        dataUrl: insomniacMolesDirectory + insomniacMolesFileName + ".data",
        frameworkUrl: insomniacMolesDirectory + insomniacMolesFileName + ".framework.js",
        codeUrl: insomniacMolesDirectory + insomniacMolesFileName + ".wasm",
    } as UnityConfig);