gistfile1.txt

class Middleware extends Component {

  constructor(props) {
    super(props)
    
    this._process()
  }
  
  _process() {
    const req = // something from browser and props to provide a convention for request information
  
    this
      .run()
      .then(() => {
        this.setState({}) // This would remove the placeholder
      })
      .catch((e) => {
        // Dunno yet :O
      })
  
  }
  
  render() {
    // do the lame onUpdate logic to render a placeholder component here
  }
  
  run() {
    throw new Error('This function must be defined in your middleware!')
  }

}

class AuthMiddlware extends Middleware {

  run(req) {
  
    // do some logic to determine if the user is logged in
    
    return new Promise((resolve, reject) => {
      resolve() // just auto resolves here for example
    })
  
  }

}

// Idea is that `Route` would only "match" when path is matched, and then all middleware do not error. If a middleware doesn't work, or calls next(), then the router would move down the route list like it didn't match the path.
<Route path='/' middleware={[AuthMiddleware]} component={SomeComponent} />

// More expressy
router.get('/', [AuthMiddleware], dispatch(Component))