Skip to content

Instantly share code, notes, and snippets.

@jyotendra
Created Oct 30, 2017
Embed
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 = () => (
<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
/*
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}/>)}/>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment