反应 - “没有路线匹配位置'/仪表板'”

Question

我目前正在使用 React-Router-v6，每次加载仪表板页面时，我都会收到“没有路线匹配位置”/仪表板“ ”的警告。

我正在尝试制作一个公共路线部分和私人路线部分。 目前我在 PrivateRoute 部分只有 Dashboard 路线。

更新：所以看起来如果我创建任何类型的新路线，即使是公共路线，它也会发出警告。 这可能是反应路由器中的错误吗？

https://codesandbox.io/s/clever-lucy-bx7nt6

我只通过这条路线收到此警告是有原因的吗？ 我的代码如下：

App.js 路线：

          <Routes>
              {/* Public Routes */}
              <Route>
                <Route path='/' element={<Homepage />}/>
              </Route>
              <Route path='/contact' element={<Contact />}/>
              <Route path='/login' element={<Login />}/>
              <Route path='/register' element={<Register />}/>
              {/* Private/Protected Routes */}
              <Route element={<PrivateRoute />}>
                <Route path='/dashboard' element={<Dashboard/>}/>
              </Route>
          </Routes>

私人路线.jsx：

import React from 'react'
import { Navigate, Outlet, Route, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

export default function PrivateRoute({ children }) {
    const { currentUser } = useAuth();
    const navigate = useNavigate();
    return currentUser ? <Outlet/> : <Navigate to='/login'/>;
}

提前谢谢你！

Answer 1

您应该在顶级Route上使用路径； 所以可以这样做：

<Route path='/dashboard' element={<PrivateRoute><Dashboard/></PrivateRoute>} />

Answer 2

哎！

我很确定问题出在“PrivateRoute”中的“出口”功能，以显示受保护的路线。 “Outlet”仅用于显示父组件内的子路径。 在这种情况下，您试图使用它来显示没有父组件的受保护路由 /dashboard，这是不正确的，可能是错误的原因。

// App.js

<Routes>
  {/* Public Routes */}
  <Route path='/' element={<Homepage />} />
  <Route path='/contact' element={<Contact />} />
  <Route path='/login' element={<Login />} />
  <Route path='/register' element={<Register />} />
  {/* Private/Protected Routes */}
  <PrivateRoute path='/dashboard'>
    <Route element={<Dashboard />} />
  </PrivateRoute>
</Routes>

// PrivateRoute.jsx

export default function PrivateRoute({ children, path }) {
  const { currentUser } = useAuth();
  const navigate = useNavigate();
  return currentUser ? <Route path={path} element={children} /> : <Navigate to='/login' />;
}

这就是我总是做同样的事情，所以我复制了我的并适应了你的。 这样，受保护的路由 /dashboard 只有在用户通过身份验证后才会显示。