React Router 7 is too amazing to settle on suboptimal docs

00:00:00: react router is one of the most important and most popular react libraries out there it gets used by

00:00:09: millions of react applications and for a good reason of course because any non-trivial react

00:00:17: app very likely needs routing needs to support different pages different components in the end

00:00:24: to be loaded for different url paths now with the release of react router version 7 which is the

00:00:32: latest version that was released a couple of months ago react router became even more powerful and

00:00:38: useful but maybe also a bit more confusing to learn and understand also because in my opinion

00:00:46: the official docs are good but maybe a bit hard to grasp if you're new to react router and if you

00:00:54: haven't followed along closely with all the surrounding blog posts and all the other information

00:00:59: you can gather from the internet and so on it can be a bit hard to understand how exactly you can use

00:01:06: react router which different features are supported and so on because react router now since version

00:01:15: 7 supports two main modes of using it and that part is fairly obvious from the website too right at

00:01:24: the start of the official documentation so to say it tells you that you can use react router since

00:01:31: version 7 in two different modes one mode is the library mode as you already know and maybe love it

00:01:40: the other mode is the framework mode which in the end allows you to use react router as an alternative to

00:01:49: nextjs or other react frameworks so you can use react router to build full stack applications if you want

00:01:56: to and i'll get back to that now when it comes to the library mode when it comes to using react router as

00:02:05: a library you in the end can continue using it as you always did and by the way i wrote a book about react

00:02:14: react key concepts and a few weeks ago i released the second edition of that book and in that book i also

00:02:21: cover react router the latest version in death i show you how to get started with it how to use it in

00:02:27: your react apps how to use its data fetching and manipulation capabilities and much much more so if

00:02:32: you haven't already and if you like me also occasionally like picking up a book to learn stuff

00:02:38: you find a link in the video description and you can get this amazing book and learn all about react in

00:02:44: depth but back to react router when you use it in library mode so in the mode you've always used it

00:02:52: in so to say you also have two different ways of using it and that's where things can get a bit more

00:02:59: confusing because you can use it the way the official docs in the end tell you to use it you can add a

00:03:07: bunch of components special components exposed by the react router library you can use those components

00:03:13: in your react app to define routes nested routes and so on and therefore to in the end tell react

00:03:21: router which react components should be loaded for which url puffs and you've used react router like this

00:03:30: in the past too unless and that's where things may get tricky unless you upgraded to use the new data

00:03:38: fetching and manipulation capabilities introduced with react router version 6.4 so not 7 which is the

00:03:46: latest version but 6.4 and i'm mentioning that version because 6.4 was a huge update in 2022 that in

00:03:57: the end brought many features from the remix framework which is a next js alternative developed by the react

00:04:04: router team and i'll get back to that framework a little bit later because it matters for the story

00:04:09: of react router but back in 2022 with version 6.4 features from that framework were brought into react

00:04:16: router now not the server-side data fetching or rendering capabilities but client-side data fetching and

00:04:26: manipulation capabilities with version 6.4 you got new ways of creating a router with help of react router

00:04:34: of defining routes and you got tools to in the end set up functions that should be triggered when a route

00:04:43: is about to be loaded or when a form on a route is submitted and that allowed you to now not just use react

00:04:50: router to load components but it also helped you fetch data for those components for those to be rendered

00:04:59: components or handle form submissions by those route components so that you did not have to write that

00:05:06: logic on your own in your components you did not have to deal with using use effect for data fetching or

00:05:13: bring in an extra library you could instead just use react router and that was a pretty amazing

00:05:19: new react router version that was released back then now when they released version 6.4 they also

00:05:28: heavily advertised a different way of defining your routes you could say to define your routes not

00:05:36: with help of components provided by react router but instead as javascript objects in the end you could

00:05:44: still use components absolutely they gave you a way for that too but all the official examples started

00:05:51: with that component based definition approach and that approach is still perfectly viable and available

00:06:00: when working with react router 7. the tricky part just is that the official docs don't really mention

00:06:07: that at least not in the getting started a documentation for the library version of react router there you

00:06:14: see the older component based definition approach which again you can still use there's nothing wrong

00:06:21: with it it's just a bit weird that with the latest big release 6.4 so the one before version 7 they

00:06:28: introduced and advertised a new way of defining routes just to go back to the older way now with version 7.

00:06:38: again both ways work it's just weird to see this switch in the recommended approach in the approach

00:06:44: that's first shown to you in the official docs because in those docs if you do select version 6.x the

00:06:51: latest version 6.6 version that was released you do start with that object-based route definition

00:06:59: approach and now with version 7 it's different again and that can be confusing and that's why i say

00:07:04: the official docs are not that great in my opinion because whilst they do cover various examples for

00:07:11: more advanced use cases you might want to handle with react router things like streaming data or handling

00:07:18: uh updates in an optimistic way which is all amazing while status covered which is good they do lack

00:07:26: a thorough introduction to the different ways you can get started with react router when using it in

00:07:32: library mode which is arguably still the mode i would guess most react apps use that library for the

00:07:40: library mode to bring it into a single page application and add routes but as mentioned before that is not

00:07:47: the only way of using it so we have that approach and it is a bit confusing from the official docs but

00:07:52: it essentially works just as it worked with version 6.x that's important there haven't been any huge

00:07:59: changes with the version 7 release so you can still use react router as it was in the past and as it is

00:08:06: covered in my book for example which by the way is updated for version 7 so i did include all the minor

00:08:12: changes uh that that affect react router in library mode in that book but besides that you can also use

00:08:20: react router in framework mode now and that's the big new thing that was released with version 7. now what

00:08:27: is that framework mode it in the end means that now you can also use react router as a replacement for

00:08:35: next js for example you can use it to build a full stack react application and seamlessly blend

00:08:41: backend and frontend code together in one and the same project and you could do that before too

00:08:47: not just with next js but also with remix which is an alternative framework to next js or should i say

00:08:55: which was kind of because remix was developed by the same people that also develop react router by the

00:09:02: same team well whilst developing remix and maintaining react router day in the end found out and they

00:09:09: document that in various blog posts they found out that there are a lot of similarities and that maybe

00:09:16: having react router and remix doesn't make too much sense which is why first they brought some of the

00:09:22: data fetching and manipulation capabilities into react router as i mentioned before and they also used react

00:09:30: router internally in the remix framework for the routing part but then they took it a step further in the end

00:09:36: and they now merged remix into react router and in the end it comes down to react router in framework mode

00:09:44: now using a viet plugin developed by the react router team that in the end will ensure that some parts of

00:09:52: your code are executed on the server only on the server if you want to you can configure it you could

00:09:58: also use the framework mode to build single page applications or to statically pre-render your react app but

00:10:05: you can also enable server-side rendering and then some parts of your code like most importantly the

00:10:12: code in your loader functions which are executed before a component is rendered and in your action

00:10:18: functions which are executed when a form is submitted that code will then only run on a server when using

00:10:25: that framework mode and since version 7 react router version 7 you don't need to use remix or anything like

00:10:31: that you can just create a project that uses that enables that framework mode so that uses this viet plugin

00:10:38: that enables all of that in the end you can just do that and then you can build full stack applications with react router

00:10:45: and the great thing here is that many features still work the way you're used to you still create your links the way you're used to you still use loaders and actions just as you might know it from version 6.4 but

00:10:59: again those loaders and actions will now run on the server so you can for example directly query a database from in there without any problems and without exposing your credentials to the client

00:11:11: so you can do stuff in there that you could not do in there if those loaders and actions would execute on the client

00:11:17: and therefore you can use the knowledge you already have or much of that knowledge and start building full stack applications with react router now they also offer some some new features or some new things to learn

00:11:31: for example you define your routes differently when using the framework mode you don't use that object-based approach you don't use components in your react components instead what you typically will do when using that framework mode is that you can use the framework mode

00:11:45: you define your routes in a routes in a routes ts file where you in the end tell react router for which url path it should load a component stored in a certain file you can also enable file-based routing if you want to that is supported with an extra plugin you can install so to say and you can also add extra functions to your route files because now we're thinking of routes more as files in a file

00:12:13: instead of components when using that framework mode you can add extra functions to these route files to tell react router which external links to process to load in css files for example which metadata to set for a page and so on and that's of course amazing i would just wish that the documentation would be a bit more thorough and maybe beginner friendly that might help but maybe that will also change the

00:12:43: in the future but other than that it's pretty amazing that we can use in the future but other than that it's pretty amazing that we now have this one library that we can use in these two different main modes either the way you always use it or as a framework and that therefore you can now easily try out that framework mode if you want to you don't have to learn a new framework it's much of the things you already know and you therefore have a relatively easy to learn alternative to next js which is not bad it's always good to have alternatives in my opinion and

00:13:12: yeah that's react router version 7 why it's pretty great what you can do with it and what the differences are and definitely let me know what you think about react router and what you're using it for and if you consider trying out that framework mode see you in future videos bye

00:13:29: you

00:13:31: you