React Router 6.4

A bit of

useHistory()

Ryan Florence

@ryanflorence

Michael Jackson

@mjackson

react-router-dom@6

✨ Nested Routes ✨

React Router 5 App

React Router 6 App

React Router 6 App

Ryan Florence

@ryanflorence

Michael Jackson

@mjackson

Ryan Florence

@ryanflorence

Michael Jackson

@mjackson

Kent C. Dodds

@kentcdodds

Ryan Florence

@ryanflorence

Michael Jackson

@mjackson

Kent C. Dodds

@kentcdodds

react-router-dom@6.4

✨ loaders ✨

React Router 5 App

React Router 6.4 App

React Router 6.4 App

React Router 6.4 App

✨ actions ✨

React Router 5 App

React Router 6.4 App

React Router 6.4 App

React Router 5 App

React Router 6.4 App

React Router 6.4 App

React Router 5 App

🙅‍♂️ contexts 😩

React Router 5 App

React Router 6.4 App

+

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

🚀
Update your dependencies

🚀
Update your dependencies

😎
and make great apps !

Thanks !

Questions ?

React Router 6.4

By Franck Boucher

React Router 6.4

  • 286