React Router V6总是渲染“//＆quot”

Question

我正在尝试在React-Create-App中实现路由器，但它总是呈现“/”并显示Home或Signin页面。我该如何解决？

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哈希值的路由，即在URL中的所有内容 “＃”。如果您试图渲染应用程序并访问“＆lt; domain＆gt;/“，而不是”＆lt; domain＆gt;/＃/“/＃/”路由无法正常工作。

例如，在您的运行代码和盒子演示中，基本URL为“ https://5p7hff.csb.app/”。在此基础网址上，哈希路由器无法真正工作，您应该真正访问“ https://5p7hff.csb.app.app/#/”而不是加载哈希路由器，并加载了应用程序。内部路由可以起作用。

来自“ https://5p7hff.csb.app/#/”您应该导航到任何路由，即 ”

/profile“ 和https://5p7hff.csb.app/#/signup ？fontsize = 14＆amp; hidenAvigation = 1＆amp; inditialpath =％2f％23％2F＆amp; module =％2FSRC％2fapp.js＆amp; themp; them = dark“ rel =“ rel =“ nofollow noreferrer” /static/img/play-codesandbox.svg“ alt =”编辑Yound-Dawn-ejyruw“>

如果您切换到其他路由器，例如browserrouter the ，则” /＃/“不再使用，路由器和路由从”/“”渲染。应用程序从哪里运行。路由将为“ https：// 5p7hff。 csb.app/“，” https://5p7hff.csb.app/profile“和” https://5p7hff.csb.app/signup”代码>。