React Router 6.4
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9663551/pasted-from-clipboard.png)
A bit of
useHistory()
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9663527/pasted-from-clipboard.png)
Ryan Florence
@ryanflorence
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9663528/pasted-from-clipboard.png)
Michael Jackson
@mjackson
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666565/localhost_3000___1_.png)
react-router-dom@6
✨ Nested Routes ✨
React Router 5 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666598/pasted-from-clipboard.png)
React Router 6 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666603/pasted-from-clipboard.png)
React Router 6 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666734/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9663527/pasted-from-clipboard.png)
Ryan Florence
@ryanflorence
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9663528/pasted-from-clipboard.png)
Michael Jackson
@mjackson
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9663527/pasted-from-clipboard.png)
Ryan Florence
@ryanflorence
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9663528/pasted-from-clipboard.png)
Michael Jackson
@mjackson
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666611/pasted-from-clipboard.png)
Kent C. Dodds
@kentcdodds
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9663527/pasted-from-clipboard.png)
Ryan Florence
@ryanflorence
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9663528/pasted-from-clipboard.png)
Michael Jackson
@mjackson
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666611/pasted-from-clipboard.png)
Kent C. Dodds
@kentcdodds
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666618/1200x627_-_Light.png)
react-router-dom@6.4
✨ loaders ✨
React Router 5 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666648/pasted-from-clipboard.png)
React Router 6.4 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666650/pasted-from-clipboard.png)
React Router 6.4 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666656/pasted-from-clipboard.png)
React Router 6.4 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666666/pasted-from-clipboard.png)
✨ actions ✨
React Router 5 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666692/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666692/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666692/pasted-from-clipboard.png)
React Router 6.4 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666715/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666715/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666715/pasted-from-clipboard.png)
React Router 6.4 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666725/pasted-from-clipboard.png)
React Router 5 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666684/pasted-from-clipboard.png)
React Router 6.4 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666731/confused-john-travolta.gif)
React Router 6.4 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666732/pasted-from-clipboard.png)
React Router 5 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666750/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666750/pasted-from-clipboard.png)
🙅♂️ contexts 😩
React Router 5 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666764/pasted-from-clipboard.png)
React Router 6.4 App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666766/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9666769/pasted-from-clipboard.png)
+
React Router 5
React Router 5
useState(): 7
React Router 5
useState(): 7
useEffect(): 5
React Router 5
useState(): 7
useEffect(): 5
contexts: 2
React Router 5
useState(): 7
useEffect(): 5
contexts: 2
React Router 6.4
React Router 5
useState(): 7
useEffect(): 5
contexts: 2
React Router 6.4
useState(): 0
useEffect(): 0
contexts: 0
React Router 5
useState(): 7
useEffect(): 5
contexts: 2
React Router 6.4
useState(): 0
useEffect(): 0
contexts: 0
Bonus
()=>{}: 0
action
loader
shouldRevalidate
Form
ScrollRestoration
DataBrowserRouter
DataHashRouter
DataMemoryRouter
DataStaticRouter
useActionData
useFetcher
useFetchers
useFormAction
useLoaderData
useMatches
useNavigation
useRevalidator
useRouteError
useRouteLoaderData
useSubmit
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287593/images/9663551/pasted-from-clipboard.png)
🚀
Update your dependencies
🚀
Update your dependencies
😎
and make great apps !
Thanks !
Questions ?
React Router 5 app
- deployed url: https://workshop-react-router-5.netlify.app/
- github: https://github.com/franck-boucher/workshop-react-router-5
API
- deployed url: https://workshop-react-router-backend.herokuapp.com/
- github: https://github.com/franck-boucher/workshop-react-router-backend
React Router 6.4 app
- deployed url: https://workshop-react-router-6.netlify.app/
- github: https://github.com/franck-boucher/workshop-react-router-6
Slides
fbo.im/rr-slides
React Router 6.4
By Franck Boucher
React Router 6.4
- 318