React Router v6 - 指向子頁面的直接鏈接返回 404 錯誤

Question

對於我的婚禮，我創建了一個小型 React 應用程序來為客人提供指導： https ://louis-et-marianne.com/

訪問我的第二頁https://louis-et-marianne.com/dormir只能在主頁上使用，但直接訪問此頁面 URL 時會出現 404。

有任何想法嗎？

這是定義路由的 App.js 代碼：

function App() {
  return (
    <div className="App">
      <Wrapper>
        <ThemeProvider theme={customTheme}>
          <CssBaseline enableColorScheme />
          <Link to="/" style={{ textDecoration: "none" }}>
            <Hero />
          </Link>
          <Container maxWidth="md">
            <Routes>
              <Route path="/" element={<Accueil />} />
              <Route path="/dormir" element={<Dormir />} />
              <Route path="*" element={<h1>Page not found.</h1>} />
            </Routes>
            <Box
              display="flex"
              alignItems="center"
              justifyContent="center"
              mt={6} mb={6}
              sx={{ transform: "rotate(13deg)" }}
            >
              <img src={betise} alt="Bétise de Cambray" width="100px" />
            </Box>
          </Container>
        </ThemeProvider>
      </Wrapper>
    </div>
  );
}

這是 Github 上的完整項目： https ://github.com/byloupom/l-et-m

謝謝！

Answer 1

它不是一個 react js 問題，它與托管服務提供商沒有將所有請求重定向到 index.html 文件有關，如果它托管在 github 頁面上，我認為它不支持這一點。

你可以在這里閱讀https://github.com/isaacs/github/issues/408