- Wrap the entry point usually index.js
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(<BrowserRouter><App\></BrowserRouter/>, documnet.querySelector('#root));
- SWITCH VS just ROUTES (can use both)
things in switch are exclusive, only the first one gets rendered once matched so order matters. Check documentation for further explanation. Either way place your Routes or switches in place where things can change. for eg in main app you may want to switch between views below your nav. so below your nav you have routes and/or switches. import { Switch, Route } from 'react-router-dom'
- LINKS vs NAVLINKS (can use both)
We need to know which route we should follow and when, usually dependent on the user clicking something. Instead of anchor tags we use these. NavLinks add styling to the currently rendered element when the route is matched. For eg you could have a button be underlined when it's pointing to the active path. Links don't have the styling. Keep in mind either way, they become anchor tags in the html when the page is rendered. Cool! You probably want one of these types in your Nav.