使用 <Routes> 时，<Route> 的所有子组件都必须是 <Navigate>

Question

我有一个简单的 React 项目，其中包含下一个组件层次结构：

主要组件（这里我调用路由服务并在路由中渲染组件）：

const App: React.FC = () => {
    return <BaseLayout>{RoutingService.getRoutes()}</BaseLayout>;
}

export default App;

路由服务代码：

class RoutingService {
    static getRoutes = (): React.ReactNode => {
        return (
            <Routes>
                <Route key={makeRandomKey()} path={PATHS.ROOT_PATH} element={<MainPage/>}/>
                <Route key={makeRandomKey()} path={PATHS.AUTH_PATH} element={<LoginPage/>}/>
                <Route key={makeRandomKey()} path={PATHS.NOT_FOUND_PATH} element={<UnderConstructPage/>}/>
                <ProtectedRoute path={PATHS.SEARCH_HISTORY_PATH} element={<SearchHistoryPage/>}/>
                <ProtectedRoute path={PATHS.USER_CABINET_PATH} element={<UserCabinetPage/>}/>
            </Routes>
        );
    };
}

export default RoutingService;

所以我想要执行的操作 - 为所有用户（登录和未登录）打开一些路由（页面），例如主页、未找到页面和身份验证页面。 但我有一些页面需要限制未登录用户的访问。为此，我创建了 ProtectedRoute 组件，当用户未登录并尝试访问需要登录的页面时，该组件应将用户重定向到身份验证页面。

interface ProtectedRouteProps {
    path: string;
    element: React.ReactNode;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({path, element}) => {
    const isAuthenticated: boolean = useSelector((state: RootState) => !!state.user.userData?.auth?.token);

    return isAuthenticated ?
        <Route path={path} element={element}/> : <> <Navigate to="/auth" replace/></> ;
};

export default ProtectedRoute;

不幸的是，我收到错误：

router.ts:5 Uncaught Error: [ProtectedRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (router.ts:5:1)

似乎

<Navigate>

组件中的

ProtectedRoute

会引发此错误，但我不知道如何正确实现此重定向。如何解决这个问题？

Answer 1

intent://m.youtube.com/watch?v=&feature=mweb_c3_open_app_11268432&itc_campaign=mweb_c3_open_app_11268432&redirect_app_store_ios=1&app=desktop#Intent;package=com.google.android.youtube;scheme=vnd.youtube;launchFlags=268435456;end