0
176
ViewsReact Router6: issue while passing element to private route
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:
1 answers
Answer question0
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