Reactjs react 路由：router.ts：11 没有匹配的路由位置管理

发布于07月30日

我正在使用react路由，并编写如下代码.

我认为所有代码都写得很好.

当我转到"/manage"时，Manage.js文件已正确打开.

然而，我一直面临警告信息:

react 路由:路由.ts:11个没有匹配路由的位置"/管理"

问题是什么？

<ApolloProvider client={client}>
  <BrowserRouter>
    {isLoggedIn ? (
      <Routes>
        <Route path="/statistics" element={<Statistics />} />
        <Route path="/manage" element={<Manage />} />
        <Route path="/info" element={<Info />} />
        <Route path="/rank" element={<Rank />} />
        <Route path="/notice" element={<Notice />} />
      </Routes>
    ) : (
      <Routes>
        <Route exact path="/" element={<Home />} />
      </Routes>
    )}
  </BrowserRouter>
</ApolloProvider>

推荐答案

我确信您看到了这个警告/错误，因为在某些时候，路径"/manage"上有101条路径渲染.

一种解决方法是实现路由保护并无条件渲染路由.

例子:

创建受保护的布局路由，以有条件地为未经身份验证的用户呈现重定向到"/"路径，否则为受保护的组件呈现Outlet路径.

import { Navigate, Outlet } from 'react-router-dom';

const ProtectedRoute = ({ isLoggedIn }) => {
  return isLoggedIn
    ? <Outlet />
    : <Navigate to="/" replace />;
};

export default ProtectedRoute;

创建一个匿名布局路由，该路由与受保护的布局路由组件相反，并重定向到其中一个受保护的路由.

import { Navigate, Outlet } from 'react-router-dom';

const AnonymousRoute = ({ isLoggedIn }) => {
  return isLoggedIn
    ? <Navigate to="//statistics" replace />
    : <Outlet />;
};

export default AnonymousRoute;

...

import AnonymousRoute from '../path/to/AnonymousRoute';
import ProtectedRoute from '../path/to/ProtectedRoute';

...

<ApolloProvider client={client}>
  <BrowserRouter>
    <Routes>
      <Route element={<ProtectedRoute isLoggedIn={isLoggedIn} />}>
        <Route path="/statistics" element={<Statistics />} />
        <Route path="/manage" element={<Manage />} />
        <Route path="/info" element={<Info />} />
        <Route path="/rank" element={<Rank />} />
        <Route path="/notice" element={<Notice />} />
      </Route>
      <Route element={<AnonymousRoute isLoggedIn={isLoggedIn} />}>
        <Route path="/" element={<Home />} />
      </Route>
    </Routes>
  </BrowserRouter>
</ApolloProvider>

因此，所有路由都会在任何时候进行渲染，并且可能是可匹配的.