带有 typescript 的 Reactv2.20.2 无法使用 <Navigate to ="/login'/>

Question

import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
import ErrorBoundary from './ErrorBoundary'; // Import your ErrorBoundary component
import Login from './Login'; // Import your Login component
import Home from './Home'; // Import your Home component
import Protected from './Protected'; // Import your Protected component

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route errorElement={<ErrorBoundary />}>
      <Route element={<Protected />} />
      <Route path="/login" element={<Login />} />
      <Route path="/home" element={<Home />} />
    </Route>
  )
);

export default router;


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

interface ProtectedProps {}

const Protected: FunctionComponent<ProtectedProps> = () => {
  const authenticated = false; // 

  if (!authenticated) { 
//  navigate to the login page here it not rendering the login component ? why so
 but it is rendering with <outlet> Note here I want to render only login not all the routes only login how to achieve that ? 
    return <Navigate to="/login" />;
  }

  
  return (
    <>
      <h1>Protected Content</h1>
      {/* Add your protected content components here */}
    </>
  );
};

export default Protected;

if（！已验证）{ // 如果未通过身份验证，则导航至登录页面。这里它没有渲染登录组件？但它正在使用 进行渲染，即使我们使用浏览器中的其他路由，它也应该替换为登录路径并渲染登录组件 返回； }？注意：当我使用时仅渲染登录页面，但其他路由它正在渲染从浏览器命中的所有路由，即使我得到任何路由只需替换为登录并渲染唯一的登录组件？

Answer 1

照你的

Protected

路线组件需要一个路径，因为它不是布局路线（不渲染嵌套路线和

Outlet

）。将其设为主页

"/"

或索引路线似乎可以让它按照您的预期运行。当应用程序加载且 URL 路径为

"/"

时，将呈现

Protected

路由组件并进行身份验证检查。

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route errorElement={<ErrorBoundary />}>
      <Route index element={<Protected />} /> // rendered on "/"
      <Route path="/login" element={<Login />} />
      <Route path="/home" element={<Home />} />
    </Route>
  )
);

如果您希望

Protected

组件成为布局路由组件，那么它应该渲染一个

Outlet

并实际包装它所保护的路由。

示例：

const Protected = () => {
  const authenticated = false; // 

  return authenticated
    ? <Outlet />
    : <Navigate to="/login" replace />;
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route errorElement={<ErrorBoundary />}>
      <Route element={<Protected />}>
        <Route path="/login" element={<Login />} />
        <Route path="/home" element={<Home />} />
      </Route>
    </Route>
  )
);

请注意，通过此实现，您可能还会收到有关

"/"

上缺少路线的错误/警告。