1

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>
    );
  }
}
IPessers
  • 66
  • 1
  • 8

0 Answers0