Skip to content

Instantly share code, notes, and snippets.

Created Oct 30, 2017
What would you like to do?
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 = () => (
<Route exact path='/' component={Home}/>
<Route path='/roster' component={Roster}/>
<Route path='/schedule' component={Schedule}/>
<PrivateRoute path='/protected' component={Protected} />
As mentioned on
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"
const PrivateRoute = ({ component: Hyt, }) => {
// return (
// <Route {} render={props => <hyt {...props} />} />
// ) -- gives error because hyt is in lower case
return (
<Route {} render={props => <Hyt {...props} />} />
const Protected = () => <h3>Protected</h3>
export default Main
This is the implementation as found on
import React from 'react'
import {
BrowserRouter as Router,
} from 'react-router-dom'
const AuthExample = () => (
<li><Link to="/public">Public Page</Link></li>
<li><Link to="/protected">Protected Page</Link></li>
<Route path="/public" component={Public}/>
<Route path="/login" component={Login}/>
<PrivateRoute path="/protected" component={Protected}/>
Question: What is this syntax below: "{ component: Component, }"
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}) {
myFunc({someLongPropertyName: 'Hello'})
// logs 'Hello'
const PrivateRoute = ({ component: Component, }) => (
<Route {} render={props => <Component {...props}/>)}/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment