React 路由器开关在第一次加载时不匹配

Question

我有以下swtich 使用react-router。当我打开 new 选项卡并转到任何路径时，它总是重定向到 /login。如果我删除底部开关（没有路径 - 默认），它会按预期工作。如果我导航到任何路径已经加载 react 应用程序（即来自/login），它会按预期工作。

当包含 nomatch 时，为什么开关明显没有检测到正确的路径仅在第一次加载时？

编辑：为清楚起见，这是在localhost、react-router-dom v5.2 上使用hashRouter

<Switch>
        <div className="loginForm align-middle">
            <img src="./img/logo.svg" alt="Restocker logo" className="w-100 p-3 mb-4"/>
            <Route path="/verify">
                <Verify/>
            </Route>
            <Route path="/reVerify">
                <ReVerify/>
            </Route>
            <Route path="/register">
                <Register/>
            </Route>
            <Route path="/forgotPassword">
                <ForgotPassword/>
            </Route>
            <Route path="/resetPassword">
                <Verify type={"password"}/>
            </Route>
            <Route path="/login">
                <Login/>
            </Route>
            <Route> //same result using path="*"
                //no match - default to login
                <Redirect to="/login"/>
            </Route>
        </div>
    </Switch>

类似的主题似乎不适用于这种情况 - 要么指根本不匹配（我的一旦加载就会匹配），要么来自更旧的 (2015) 版本。

Answer 1

请务必注意，当前版本的 react-router-dom v6 不支持 <switch> 组件，而是使用 <BrowserRouter>，我喜欢将其导入为 <Router>

import {
  BrowserRouter as Router,
  Route,
  Routes,
} from "react-router-dom";

另外，v6 使用<element> 组件来调用您希望在特定路由上运行的组件。

<Router>
    <Navbar/>
    <Routes>
      <Route path="/" element={<Home />} />
       <Route path="about" element={<AboutPage />} />
       <Route path="contact" element={<ContactPage />} />
      </Routes>
    </Router>

这意味着您还必须导入这些组件。

import Navbar from "./components/NavBar";
import Home from "./pages";
import AboutPage from "./pages/aboutPage";
import ContactPage from "./pages/contactPage";

我已经包含了一个导航栏组件并将其放置在<Router> 之外但在<Routes> 之外，以便导航出现在所有路线上。但这更多是一种设计选择。

您可能还会遇到一个问题，即您的路线将打开并在您单击路线时所在的屏幕上的同一区域进行分页。如果您需要帮助，请告诉我。如果您的应用不超过整页长度，则可能不需要它

Answer 2

我认为这很愚蠢 - 包含 div 应该在 switch 之外。它现在按预期工作（我也改为使用 component 道具而不是孩子，但一旦 div 被移动，两者似乎都可以工作）。

工作代码：

    <div className="loginForm align-middle">
        <img src="./img/logo.svg" alt="Restocker logo" className="w-100 p-3 mb-4"/>
        <Switch>
            <Route path="/verify" component={Verify}/>
            <Route path="/reVerify" component={ReVerify}/>
            <Route path="/register" component={Register}/>
            <Route path="/forgotPassword" component={ForgotPassword}/>
            <Route path="/resetPassword" render={() => Verify("password")}/>
            <Route path="/login" component={Login}/>
            <Redirect to="/login"/>
        </Switch>
    </div>

注意现在Switch 的所有直系子代现在都只有Route

编辑根据Drew Reese的建议进行了调整