Main.my.js

/*
  This is my test implementation
*/

import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from './Home'
import Roster from './Roster'
import Schedule from './Schedule'

// The Main component renders one of the three provided
// Routes (provided that one matches). Both the /roster
// and /schedule routes will match any pathname that starts
// with /roster or /schedule. The / route will only match
// when the pathname is exactly the string "/"
const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/roster' component={Roster}/>
      <Route path='/schedule' component={Schedule}/>
      <PrivateRoute path='/protected' component={Protected} />
    </Switch>
  </main>
)

/*
  As mentioned on https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/
  We gave component a nickname of "Hyt".
  It is important to keep the react's component first name as capital. Without which it will throw
  "Warning: Unknown props `match`, `location`, `history`, `staticContext` on <hyt> tag. 
  Remove these props from the element. For details, see https://fb.me/react-unknown-prop"
*/

const PrivateRoute = ({ component: Hyt, ...rest }) => {

  // return (
  //   <Route {...rest} render={props => <hyt {...props} />} />
  // ) -- gives error because hyt is in lower case

  return (
    <Route {...rest} render={props => <Hyt {...props} />} />
  )
}

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

export default Main

Main.react-router.js

/*
  This is the implementation as found on https://reacttraining.com/react-router/web/example/auth-workflow
*/
import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from 'react-router-dom'


const AuthExample = () => (
  <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>
)

/* 
  Question: What is this syntax below: "{ component: Component, ...rest }"
  Ans: One useful technique is to give the object keys descriptive names for use on the outside of the function, but inside rename them to something simpler:

  function myFunc({someLongPropertyName: prop}) {
    console.log(prop);
  }

  myFunc({someLongPropertyName: 'Hello'})
  // logs 'Hello'
  
  Refer: https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/
*/ 

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => <Component {...props}/>)}/>
)