React router
React router, as you can guess, is a library you can install to create routes for your React app. DOCS
Note that this is considered Client-side routing.
Client-side vs Server-side routing pros and cons
Steps
1) <BrowserRouter><App/></BrowserRouter>
2) <link to='/home'> (instead of a href)
3) <Route path="/home" component={HomePage}>
You can define a path like so (exact indicates url must be exactly matched):
<Route path="/" exact component={HomePage} />
<Switch></Switch> and place the most generic at bottom(Switch makes the first result ‘pop’ out and the rest wouldn’t match)
Props object
(go to React in devtools) You will see the following passed in if you pass in props.
-
match -
location -
history
pass in props through route:
<Routepath=”/twitter”render={props=><TwitterFeeddata={data}{…props}/>}/>
links
can pass in params (:id)
<a> for external
parse props through query-string library
const parsed = queryString.parse(location.search)
In REST best practices, use query params for non-compulsory props, and route params for compulsory props
Resources:
https://blog.pshrmn.com/entry/simple-react-router-v4-tutorial/
Stuff I Have Learnt 