位置“/”的路由没有元素。这意味着默认情况下它将呈现一个具有空值的<Outlet />，从而导致“空”页面

Question

每当“/auth/sign-in”或“/auth/sign-in”路由不匹配时，它应该导航到“http://localhost:3001/auth/sign-in”路由。有什么办法可以解决这个问题吗？

<BrowserRouter>
      <Routes>
        <Route path="/">
          <Route path="auth" element={<AuthContainer />}>
            <Route
              path="sign-in"
              element={<SignInForm onLoadUser={loadUser} />}
            />
            <Route
              path="sign-up"
              element={<SignUpForm onLoadUser={loadUser} />}
            />
          </Route>
        </Route>
        <Route path="*" element={<Navigate to="/auth/sign-in" replace />} />
      </Routes>
</BrowserRouter>

Answer 1

您可以像这样为 global 和 /auth 添加通配符路由 -

<BrowserRouter>
  <Routes>
    <Route path="/">
      <Route path="auth" element={<AuthContainer />}>
        <Route
          path="sign-in"
          element={<SignInForm onLoadUser={loadUser} />}
        />
        <Route
          path="sign-up"
          element={<SignUpForm onLoadUser={loadUser} />}
        /> 
        <Route path="*" element={<Navigate to="/auth/sign-in" />} />
      </Route>
    </Route> 
    <Route path="*" element={<Navigate to="/auth/sign-in" />} />
  </Routes>
</BrowserRouter>

这会很好用！