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