title: Warning: You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored
body: <p>Hello i try to protected route if is no auth but it is not work</p>
  
  <p>Warning: You should not use Route component and Route render in the same route; Route render will be ignored</p>
  
  <p>App.js</p>
  
  <pre><code>  import React, { Fragment, useEffect } from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import NavBar from './component/Layout/NavBar';
  import Landing from './component/Layout/Landing';
  import Login from '../src/component/Auth/Login';
  import Register from '../src/component/Auth/Register';
  import Dashboard from './component/dashboard/Dashboard';
  import Alert from './component/Auth/Alert';
  import PrivateRoute from './component/routing/PrivateRoute';
  
  import './App.css';
  
  // Redux
  import { Provider } from 'react-redux';
  import store from './store';
  import setAuthToken from './utils/token';
  
  import { loadUser } from './action/auth';
  
  
  if (localStorage.token) {
    setAuthToken(localStorage.token);
  }
  const App = () =&gt; {
  
    useEffect(() =&gt; {
      store.dispatch(
        loadUser());
    }, []);
  
    return (
      &lt;Provider store={store}&gt;
        &lt;Router&gt;
          &lt;Fragment&gt;
            &lt;NavBar /&gt;
            &lt;Route exact path="/" component={Landing}&gt;&lt;/Route&gt;
            &lt;section className="container"&gt;
              &lt;Alert /&gt;
              &lt;Switch&gt;
                &lt;Route exact path="/login" component={Login}&gt;&lt;/Route&gt;
                &lt;Route exact path="/register" component={Register}&gt;&lt;/Route&gt;
                &lt;PrivateRoute exact path="/dashboard" component={Dashboard}&gt;&lt;/PrivateRoute&gt;
              &lt;/Switch&gt;
            &lt;/section&gt;
          &lt;/Fragment&gt;
        &lt;/Router&gt;
      &lt;/Provider&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p>PrivateRoute.js</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { Route, Redirect } from 'react-router-dom';
  
  const PrivateRoute = ({
    componet: Component,
    auth: { isAuthenticated, loading },
    ...rest
  }) =&gt; (
    &lt;Route
      {...rest}
      render={props =&gt;
        !isAuthenticated &amp;&amp; !loading ? (
          &lt;Redirect to="/login" /&gt;
        ) : (
          &lt;Component {...props} /&gt;
        )
      }
    /&gt;
  );
  
  PrivateRoute.propTypes = {
    auth: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
    auth: state.auth
  });
  
  export default connect(mapStateToProps)(PrivateRoute);
  </code></pre>
  
  <p>Warning: You should not use "Route component" and "Route render" in the same route; "Route render" will be ignored</p>
  
  <p>how can I fix it ?</p>