React Router6: issue while passing element to private route

Question

I am trying to create a PrivateRoute component as:

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;

and this is how I am trying to use it:

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>
  );
}

but while using the PrivateRoute I am getting this error:

is your types are updated ? have you tried `yarn upgrade @types/react@latest` ? — shubham jha, Jan 08 '22 at 13:44

Sangeet Agarwal · Accepted Answer · 2022-01-08T18:16:57.070

My previous attempt of element: React.ComponentType<any> solved the typescript error but then the new error was

Error: [PrivateRoute] is not a component. All component children of must be a <Route> or <React.Fragment>

So, with v6 react router only Route components can be a child of Routes. see the v6 docs & you'll see the authentication pattern is to use a wrapper component to handle the auth check and redirect.

The old v5 pattern will not work any more.

This is how your PrivateRoute should look like. I've commented out the previous code so you can see the changes I've made.

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;

And, your App component will then look like so

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>
  );
}

And, here the link to the codesandbox https://codesandbox.io/s/reactrouterv6wayofdoingthings-0nmkg?file=/src/App.tsx

React Router6: issue while passing element to private route

1 Answers1