除非在 App.js 中链接，否则找不到 React Github 页面链接文件

Question

我有一个 Github 页面网站，它使用 React 路由器，并将 App.js 作为指向 index.js 中所有子页面的父路由：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} >
    <Route index element={<Home />} />
    <Route path="portfolio" element={<Portfolio />} />
    <Route path="resume" element={<Resume />} />
    <Route path="contact" element={<Contact />} />
    <Route path="*" element={<NoPage />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

我最初将子页面链接在应用程序中作为标题，但我最近更改了外观和布局，现在子页面链接在主页中。在本地主机中，这工作得很好，但是当我部署它时，主页中的链接直接指向 404 文件未找到错误页面。经过测试，我意识到链接仅在应用程序中有效，即使直接在地址栏中输入路线也不起作用。我想这与 App 作为父页面有关，但我不知道如何修复它。

应用程序中的旧链接：

<Link to="/portfolio">
  <MenuText>
    Portfolio
  </MenuText>
</Link>

主页中的新链接：

<Link reloadDocument to="/portfolio">
  <CenterMenuText>
    See my portfolio
    <CenterMenuLine chars={13} sx={{margin: 'auto'}}/>
  </CenterMenuText>
</Link>

两者都使用 React router 的链接组件。

我尝试使用 HashRouter 而不是 BrowserRouter 并使用不同版本的 .取消 reloadDocument 确实有效，但应用程序需要根据显示的页面进行更改，如果没有它，应用程序就不会更改。

Answer 1

我认为这里的问题是

<Route path="*" element={<NoPage />} />

这条路。

使用 * 作为路径表示未提及的所有其他路径都应指向此处。

尝试删除此行，这可能允许您访问子页面。