How to protect routes in reactjs?

JavaScript
1

I want to protect my register and login routes from user when user is successfully authenticated, I saw a freecodecamp youtube video “Protected Routes in React using React Router” but It does not render anything on page Here is my approch,

<Switch>
<ProtectedRoutes exact path="/register" component={(routeProps) => <Register {...routeProps} />} />
<ProtectedRoutes exact path="/login" component={(routeProps) => <Login {...routeProps} />} />
</Switch>

definition of “ProtectedRoutes”

import React from "react";
import { Route, Redirect } from "react-router-dom";

const ProtectedRoutes = ({ component: Component, ...rest }) => {
    // console.log(component);
    return (
        <Route {...rest}
            render={
                (props) => {
                    return <component {...props} />
                }
            } />
    )
}

export default ProtectedRoutes;

and why here rename “component: Component” property cause when I pass this

component={(routeProps) => <Register {...routeProps} />}

here It name is “component”

2

If you use component: Component, then you must use return <Component {...props} />

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.