CODEWITHSUNDEEP
reactjsroutes
Mahmoud Nafea
Mahmoud Nafea

Reputation: 117

react Private Route

I'm trying to apply privateRoute but it's not working at all either the component or the redirecting I tried also using children like documentation but same issue. React doesn't read Component and while I import it I get error Component called but not used

import React from "react";
import { BrowserRouter as Route, Redirect } from "react-router-dom";
import { isAuthenticated } from './auth';

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={props =>
            isAuthenticated() ? (
                <Component {...props} />
            ) : (
                    <Redirect
                        to={{
                            pathname: "/signIn",
                            state: { from: props.location }
                        }}
                    />
                )
        }
    />
);
export default PrivateRoute;
```
my routes in app
``
function App() {
  return (
    <Router>
      <NavbarComponent />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/products" exact component={Products} />
        <Route path="/signIn" exact component={SignIn} />
        <Route path="/signUp" exact component={SignUp} />
        <PrivateRoute path="/dashboard" exact component={Dashboard} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
}
`

```

Upvotes: 1

Views: 89

Answers (1)

Ajeet Shah
Ajeet Shah

Reputation: 19813

You have to import and use Route when defining PrivateRoute component

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

not the BrowserRouter: 

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

Upvotes: 1

Related Questions