没有与位置&q；/登录&q；匹配的路由Reaction路由器DOM v6 [英] No routes matched location "/login" react router dom v6

问题描述

我正在尝试组织`act-router-dom v6中的路由。以下是我的流程：

根AppComponent

function AppComponent() {
  return <AppRoute />;
}

AppRoute.js(基本路由)

const AppRoute = () => {
  return (
    <>
      <GuestRoute path="/login" component={Login} />
    </>
  );
};

GuestRoute

const GuestRoute = ({ component: Component, ...rest }) => {
  return (
    <GuestLayout>
      <Routes>
        <Route {...rest} element={<Component />} />
      </Routes>
    </GuestLayout>
  );
};

GuestLayout

const GuestLayout = ({ children, ...rest }) => {
  return (
        <div>
          {children}
        </div>
  );
};

但是，当我转到/login时，它没有分页，但仍然显示No routes matched location "/login"的警告。我正在使用react-router-dom v6

推荐答案

如果您尝试共享多个版面，则RRDv6可以很好地处理这一开箱即用的功能。

Layout Routes

使用GuestLayout容器的重构示例：

<Routes>
  <Route path="/" element={<GuestLayout />}>   // <-- layout wraps children routes
    <Route path="login" element={<Login />} /> // <-- "/login"

    // Optional index route if no nested routes match
    <Route
      index                                    // <-- "/"
      element={<div>Default Page Content</div>}
    />
  </Route>
</Routes>

这是通过让父布局容器组件为要呈现的嵌套路线呈现Outlet来实现的。

const GuestLayout = () => {
  return (
    <div /* your crazy layout styling */ >
      <h1>This is the Guest Layout Page</h1>
      <Outlet /> // <-- matched nested route rendered here
    </div>
  );
};

这篇关于没有与位置&q；/登录&q；匹配的路由Reaction路由器DOM v6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！