privateroute with react-router-dom v6

Question

i have a problem with conversion this code to react-router-dom v6. anyway can help me? `

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

const PrivateRoute = ({ component: Component, auth: { isAuthenticated }, ...rest }) => (
    <Route
        {...rest}
        render={props => !isAuthenticated && !loading ? (<Redirect to='/login' />) : (<Component {...props} />)}
    />
);

const mapStateToProps = state => ({
    auth: state.auth
});

export default connect(mapStateToProps)(PrivateRoute);

`

i try convert the code to this form but its not work `

import React from 'react';
import { Outlet, Navigate } from 'react-router-dom';
import { connect } from 'react-redux';

const PrivateRoute = ({component: Component, auth: {isAuthenticated}, ...rest}) => {
  <Outlet
    {...rest}
    render={props => !isAuthenticated ? (<Navigate to='/'/>) : (<Component {...props} />)}
  />
}

const mapStateToProps = state => ({
    auth: state.auth
});

export default connect(mapStateToProps)(PrivateRoute);

`

privateroute with react-router-dom v6

0 Answers0