1

I'm fairly new to React Router. I'm trying to implement an Auth check when the app runs as answered here: How to implement authenticated routes in React Router 4?. If logged in it should load the dashboard component, if not you should get redirected to the login screen.

The redirect does not work, it's just a blank page.

Any ideas?

export default class App extends React.Component {
  state = {
    auth: false
  };

  updateAuth = value => {
    this.setState({
      auth: value
    });
  };

  render() {
    const { auth } = this.state;
    console.log(auth);

    const PrivateRoute = ({ component: Component, ...rest }) => {
      return (
        <Route
          {...rest}
          render={props =>
            auth ? (
              <Component {...rest} />
            ) : (
              <Redirect
                to={{ pathname: "/login", state: { from: props.location } }}
              />
            )
          }
        />
      );
    };

    return (
      <Router>
        <div>
          <Route path="/login" component={Login} auth={this.updateAuth} />
          <PrivateRoute path="/dashboard" component={Dashboard} />
        </div>
      </Router>
    );
  }
}

https://codesandbox.io/s/rj6pqkw7xq

Paul Redmond
  • 3,101
  • 1
  • 24
  • 50

1 Answers1

2

You still have the path attribute on the PrivateRoute set to /dashboard, if you go to https://qlj5rnnlnq.codesandbox.io/dashboard it'll attempt to load your Dashboard page, but fail because the file on the server doesn't have the .js file extension.

If you want to go to the dashboard page from the root URL, change the path to:

<PrivateRoute authed={true} path="/" component={Dashboard} />

And also change the file extension on the Dashboard file so it becomes Dashboard.js

dan
  • 1,109
  • 8
  • 20
  • Ah, thanks. I fixed the file extension. Can I just redirect to /dashboard? I just want to app to verify if the user is logged in or not as so go to either /dashboard or /login – Paul Redmond Jan 03 '19 at 15:54
  • Sure, that'd work. Just set up a redirect on the root route (i.e. path="/") and have that redirect to `/dashboard` and it should be picked up by the PrivateRoute you've already set up – dan Jan 03 '19 at 16:08
  • I can't get it to work. I either get a blank page or a `Maximum update depth exceeded`. – Paul Redmond Jan 03 '19 at 16:13
  • Ah I probably should have explained what I meant better. Your PrivateRoute was fine and doesn't need to be changed, you can just add another Route in your Router for `path="/"` and put a redirect in there, I've made some changes here: https://codesandbox.io/s/2z823x2rrp – dan Jan 03 '19 at 16:19
  • This is close to working right. I'm getting a console error though - `Warning: You tried to redirect to the same route you're currently on: "/dashboard"`. – Paul Redmond Jan 03 '19 at 16:27
  • I added a link to the dashboard from the login to reproduce that error – Paul Redmond Jan 03 '19 at 16:29
  • You can either add the `exact` attribute to the root route (the one with `path="/"`) or add some additional checks to stop it redirecting if the route matches, up to you – dan Jan 03 '19 at 16:32
  • I still didn't get this resolved. Going to add a bounty. – Paul Redmond Jan 10 '19 at 15:09
  • @PaulRedmond what other problem did you face after adding the `exact` attribute to dan's example? – Roy Wang Jan 11 '19 at 03:45