AuthExample.js

AuthExample.js

//
// AuthExample.js
//
import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter,
} from 'react-router-dom'

const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true
    setTimeout(cb,500)
  },
  signout(cb) {
    this.isAuthenticated = false
    setTimeout(cb,100)
  }
}

const Public = () => <h3>Publc</h3>
const Protected = () => <h3> Protected </h3>

class Login extends React.Component {
  state = {
    redirectToReferrer: false
  }
  login = () => {
    fakeAuth.authenticate(() => {
      this.setState(() => ({
        redirectToReferrer: true
      }))
    })
  }
  render() {
    const { from } = this.props.location.state || {from: { pathname: '/'} }
    const { redirectToReferrer } = this.state

    if (redirectToReferrer === true) {
      return <Redirect to={from} /> // <-- Problems seems to be here - 
    }                         // from: {pathname: "/protected", search: "", hash: "", state: undefined, key: "g60r1z"}
    return (
      <div>
        <p> You must log in to view the page</p>
        <button onClick={this.login} > Log in </button>
      </div>
    )
  }
}

const PrivateRoute = ({component: Component, ...rest}) => (
    <Route {...rest} render = {(props) => (
      fakeAuth.isAuthenticated === true
        ? <Component {...props} />
        : <Redirect to={{
            pathname: '/login',
            state: { from: props.location }
        }} />
    )} />
)

const AuthButton = withRouter(({history}) =>(
  fakeAuth.isAuthenticated ? (
    <p>
      Welcome! <button onClick={() => {
        fakeAuth.signout(() => history.push('/'))
      }} >Sign Out</button>
      </p>
  ) : (
    <p>You are not logged in. </p>
  )
))

export default function AuthExample() {
  return (
    <Router>
      <div>
        <AuthButton />
        <ul>
          <li><Link to="/public">Public Page</Link></li>
          <li><Link to="/protected">Protected Page </Link></li>
        </ul>
        <Route path="/public" component={Public} />
        <Route path="/login" component={Login} />
        <PrivateRoute path="/protected" component={Protected} />
      </div>
    </Router>
  )
}

Hello,
The redirect to the attempted page is not working after the login button is clicked. It appears to be a problem with the component on line 44. Which I am also getting the warning :
webpackHotDevClient.js:138 ./src/AuthExample.js
Line 44: Expected an assignment or function call and instead saw an expression no-unused-expressions

Here is the value of the "from" object:
from: {pathname: "/protected", search: "", hash: "", state: undefined, key: "g60r1z"}

Any thoughts are greatly appreciated...

Try passing in the from.pathname prop instead of the entire from object.

@ikaikacorrea - thanks for taking the time to reply. I tried that and also hardcoded it with "/protected" just to see the Redirect component work but same result. I'm wondering if Redirect requires the state component to be defined as it is on line 59?

Adding the "return" statement on line 44 seems to have fixed the problem....