I'm using nodejs with express for the backend and react with react-router-dom for the front and I can't properly navigate through the app.
I tried to reuse the example on react-router with PrivateRoute but my Components, once logged in, won't display.
So far, here is what happens:
- Url: '/' => User fill in its crendentials
- Url: '/section' => Empty view with
Warning: You tried to redirect to the same route you're currently on: "/section"
If I reload the page, I get a Cannot GET '/section'
and if I return to '/', only my component of authentification load displaying that I'm connected.
I'd like my Header, Navigation and Section Component to be displayed once logged in but did I miss?
My authentification Component
const AuthForm = withRouter(() => // history
(checkAuthenticated() ?
<p>Congrat, you re logged in</p>
:
<UserForm />
));
My privateRoute Component
function PrivateRoute({ component: Component, ...rest }) {
return (
<Route
{...rest}
render={props => (
checkAuthenticated() === true
? <Component {...props} />
: (
<Redirect to={{
pathname: '/login',
state: {
from: props.location,
},
}}
/>))}
/>
);
}
My main component:
class Everything extends React.Component {
constructor(props) {
super(props);
this.state = {
administrator: false,
};
}
render() {
return (
<BrowserRouter>
<div className="only1child">
<Switch>
<AuthForm />
<PrivateRoute
path="/"
render={() => (
<div className="somenav">
<Header user="fake Edgar Allan Poe" view="/loginFake" />
<Navigation administrator={this.state.administrator} />
</div>
)}
/>
<PrivateRoute path="/section" component={Section} />
</Switch>
</div>
</BrowserRouter>
);
}
}