Topics:
- Single Page Applications
- Routing, declarative component based routing
- Browser vs Hash History
- Path and Component
- A starter pack project for all things React Router. Learn to set up a basic routing system within an application. Use this application to help guide your learning over the next couple of days.
- cd into the repository and run
yarn install
- run
yarn start
- You'll notice we've already installed react-router-dom for you.
import
your Router as BrowserRouter inside yourindex.js
file.- Wrap your
<App />
component that you're passing toReactDOM.render()
with your newRouter
component. - open up your chrome
REACT DEV TOOLS
and notice your app is now all wrapped inBrowserRouter
- inside the
REACT DEV TOOLS
expand<BrowserRouter>
and highlight<Router>
and notice that here is a"history"
object on props.
- Inside of your
App.js
fileimport { Route } from 'react-router-dom';
- This is where we're going to declare and specify our router.
- Create 3
<Route />
setting theirpath
prop equal to/
,/about
,/contact
with their respective components. - Be sure to incluce the
exact
prop on the root component for/
to make sure that it's rendering the exact component and not all the other components. - You should now be able to type
/
,/about
,/contact
afterlocalhost:PORT/
to see what's a
- Inside of
Navigation.js
import { Link } from 'react-router-dom'
- Delete
NavLink
and replace it with<Link />
- Pro-tip: highlight NavLink and use
cmd/ctrl + d
to select them all at once. - Change the href on
<Link>
toto
and specify the correct routes to navigate to. - Head over to your app and start navigating. You should be able to see your URLS changing their paths as you go.