In below given 2 examples they are almost similar but still one's exact keyword works but others wont why?

Viewed 76

Example 1.

routes.js(1st file)
<ProtectedRoutes path={prop.path} component={prop.component} key={key} />

protectedRoute.js(2nd file)
        <Route
            {...rest}
            exact
            render={(props) => {
                if (verified) return <Component {...props} />;
                return (
                    <Redirect
                        to={{
                            pathname: routes.LICENCEKEY,
                        }}
                    />
                );
            }}
        />

Example 2.

routes.js(1st file)
<ProtectedRoutes exact path={prop.path} component={prop.component} key={key} />

protectedRoute.js(2nd file)
        <Route
            {...rest}
            render={(props) => {
                if (verified) return <Component {...props} />;
                return (
                    <Redirect
                        to={{
                            pathname: routes.LICENCEKEY,
                        }}
                    />
                );
            }}
        />

My question is that the first example is not working but the second example is working. The only difference is that in 1st example I'm writing exact directly inside and in 2nd example I'm passing exact to protectedRoute component and receiving and applying as rest.

Let me know if u understood my question.

EDIT

full protectedRoute.js file

import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

import routes from 'constants/routes.json';

const ProtectedRoute = ({ verified, component: Component, ...rest }) => {

    return (
        <Route
            exact
            {...rest}
            render={(props) => {
                if (verified) return <Component {...props} />;
                return (
                    <Redirect
                        to={{
                            pathname: routes.LICENCEKEY,
                        }}
                    />
                );
            }}
        />
    );
};

const mapStateToProps = (state) => {
    return {
        verified: state.licencekey.verified,
    };
};

export default connect(mapStateToProps)(ProtectedRoute);
0 Answers
Related