除非我使用 Link 组件，否则为什么 React Router 会崩溃？

Question

我正在将一个项目从非常旧的

react-router

版本迁移到较新的

react-router-dom

。我的顶级反应组件中有以下代码：

import React from "react";
import {createRoot} from "react-dom/client";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import NewPage from "./components/NewPage";

const TestComponent = () => {
  return (
    <div>
      <Link to={"/new_page"}>GO TO ROUTE</Link>
    </div>
  );
};

const root = createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<TestComponent />} />
      <Route path="/new_page" element={<NewPage />} />
    </Routes>
  </BrowserRouter>
);

这段代码工作正常。当我点击链接时，

NewPage

组件被渲染。

问题是，如果我手动输入

http://localhost:3001/new_page

，我会得到这个错误：

Cannot GET /new_page

。链接能够导航到那里但我无法手动导航对我来说没有意义。

项目使用jekyll、webpack、react构建。任何帮助将不胜感激。