Authenticated routes using react-router

  1. create-react-app route-test
  2. cd route-test
  3. yarn add react-router-dom
  4. Edit App.js:
  • We are using Stateless Functional Components to model out our nav bar, and a few pages.
  • Link is what we use to create a link to something that we define in our router. This needs to be a child of a Router, so our Nav component must be a child of that.
  • Switch is where we are putting out routes to keep everything nice and tidy.
  • We have a very simple login system here, where if you go to /session and push a button, you are considered logged in.

Secret isn’t so secret

Lets create an authenticated component. The idea is that if the user is not authenticated, we will redirect to /session which will show whatever login form we have.

Now we just need to update the switch to use the new AuthenticatedRoute. We are passing in an authed property that the main App component is maintaining.

<AuthenticatedRoute authed={this.state.login} path=”/secret” component={Secret}/>

Now we need to update the Session component to handle the login. In the case that we aren’t logged in, we show a button that calls the login method on the container component. This will change the login state and trigger a rerender of the components. Once that happens, authed will be true so we look inside of the location property to see if there was a protected route stored in the router history state. If so, we redirect back to that. Otherwise, we redirect back to home.

const Session = ({authed,location,login}) => {
if( authed ) {
let l = location.location;
let pathname = "/";
if( l && l.state && l.state.from ) {
pathname = l.state.from.pathname;
return <Redirect to={pathname}/>
} else {
return (
<button onClick={() => {login()}}>Click me</button>

And finally, we need to wire all this up in the main routes.

<Route path="/session" render={(location) => <Session location={location} login={this.login} authed={this.state.authed}/> }/> } />

Here we aren’t just passing in component={Session} but rather a function that gets wired up to a number of local callbacks. This is mainly so that the login function can call setState and then trigger the render. In a case where this would be something that came from a server, you could use the normal asynchronous methods and not need to force this directly.