React Router6：將元素傳遞給私有路由時出現問題

Question

我正在嘗試將 PrivateRoute 組件創建為：

import { useStoreState } from 'easy-peasy';
import React, { Component } from 'react';
import { Navigate, Route } from 'react-router-dom';

// import styles from'./index.module.scss';

interface PrivateRouteProps {
  path: string;
  element: Component;
}
const PrivateRoute: React.FC<PrivateRouteProps> = ({
  path,
  element,
  children,
  ...props
}) => {
  const isLoggedIn = useStoreState((state: any) => state.user.isLoggedIn);

  if (!isLoggedIn) {
    return <Navigate to="/login" />;
  }

  return (
    <Route path={path} element={element} {...props}>
      {children}
    </Route>
  );
};
export default PrivateRoute;

這就是我嘗試使用它的方式：

function App() {
  return (
    <div className={styles.app}>
      <Router>
        <Routes>
          <Route path="" element={<Home />}></Route>
          <Route path="login" element={<Login />}></Route>
          <PrivateRoute path="cohort" element={MyComponent}></PrivateRoute>
        </Routes>
      </Router>
    </div>
  );
}

但是在使用 PrivateRoute 時出現此錯誤：

Answer 1

我之前對element: React.ComponentType<any>解決了 typescript 錯誤，但隨后出現新錯誤

錯誤：[PrivateRoute] 不是組件。 的所有子組件必須是 <Route> 或 <React.Fragment>

因此，對於 v6 react router，只有 Route 組件可以是 Routes 的子組件。 請參閱 v6 文檔，您會看到身份驗證模式是使用包裝器組件來處理身份驗證檢查和重定向。

舊的 v5 模式將不再適用。

這就是您的PrivateRoute的樣子。 我已經注釋掉了之前的代碼，以便您可以看到我所做的更改。

import { useStoreState } from "easy-peasy";
import React, { Component } from "react";
import { Navigate, Route } from "react-router-dom";

// import styles from'./index.module.scss';

interface PrivateRouteProps {
  path: string;
  element: React.ComponentType<any>;
  // element: Component;
}
// const PrivateRoute: React.FC<PrivateRouteProps> = ({
//   path,
//   element,
//   children,
//   ...props
// }) => {
const PrivateRoute = ({ children }: { children: JSX.Element }) => {
  const isLoggedIn = useStoreState((state: any) => state.user.isLoggedIn);

  if (!isLoggedIn) {
    return <Navigate to="/login" />;
  }

  // return (
  //   <Route path={path} element={element} {...props}>
  //     {children}
  //   </Route>
  // );

  return children;
};

export default PrivateRoute;

而且，您的App組件將如下所示

export function App() {
  return (
    <div>
      <Router>
        <Routes>
          <Route path="" element={<Home />}></Route>
          <Route path="login" element={<Login />}></Route>
          {/* <PrivateRoute path="cohort" element={MyComponent}></PrivateRoute> */}
          <Route
            path="cohort"
            element={
              <PrivateRoute>
                <MyComponent />
              </PrivateRoute>
            }
          />
        </Routes>
      </Router>
    </div>
  );
}

而且，這里是代碼框https://codesandbox.io/s/reactrouterv6wayofdoingthings-0nmkg?file=/src/App.tsx的鏈接