React Router v6 总是渲染“/”

Question

我正在尝试在 react-create-app 中实现路由器，但它总是呈现“/”并显示主页或登录页面。 我该如何解决这个问题？

function AppRouter({ isLoggedIn, user }) {
  return(
    <Router>
      <Routes>
        <Route path="/profile" element={<Profile />} />
        <Route path="/signUp" element={<SignUp />} />
        {isLoggedIn
          ? <Route exact path={"/"} element={<Home user={user}/>} />
          : <Route exact path={"/"} element={<SignIn />} />
        }
      </Routes>
    </Router>
  )
}

Answer 1

您似乎对HashRouter如何与 UI 一起工作有一点误解。

import { HashRouter as Router, Route, Routes } from "react-router-dom";
import Profile from "./Profile";
import SignUp from "./SignUp";
import Home from "./Home";

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/profile" element={<Profile />} />
        <Route path="/signUp" element={<SignUp />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

HashRouter使用 URL hash 值处理路由，即 URL 中"#"之后的所有内容。 如果您尝试渲染您的应用程序并访问"<domain>/"而不是"<domain>/#/" ，则路由将不起作用。

例如，在您运行的代码框演示中，基础 URL 是"https://5p7hff.csb.app/" 。 在此基础上 URL hash 路由器并没有真正工作，您应该真正访问"https://5p7hff.csb.app/#/" ，因此 Z0800FC577294C34E0BZ28 路由器正在加载和加载 28

从"https://5p7hff.csb.app/#/"您应该导航到您的任何路线，即"https://5p7hff.csb.app/#/profile"和https://5p7hff.csb.app/#/signUp" 。

如果您切换到其他路由器，例如BrowserRouter ，则不再使用"/#/" ，路由器和路由从应用程序运行的"/"呈现。 路由将是"https://5p7hff.csb.app/" 、 "https://5p7hff.csb.app/profile"和"https://5p7hff.csb.app/signUp" 。