没有路由匹配位置“/login”反应路由器dom v6

Question

我正在尝试在`react-router-dom v6.0中组织路由。这是我的流程：

根应用程序组件

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

AppRoute.js（基本路由）

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

访客路线

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

宾客布局

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

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

Answer 1

如果您尝试共享多个布局，那么react-router-dom@6可以很好地开箱即用地处理这个问题。

布局路线

使用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>
  );
};

Answer 2

不是直接的解决方案，而是由头痛引起的小错字。基本上，检查您的路由分隔符“/”。我不小心输入了“”，这显然是不正确的。

调试问题的另一个好方法是不要使用所有路径“*”作为路由中的最后一条路由。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="*" element={<p>Path not resolved</p>} />
  </Routes>
</BrowserRouter>