[
  {
    "start": 0.0,
    "end": 8.8,
    "text": "react router is one of the most important and most popular react libraries out there it gets used by"
  },
  {
    "start": 9.44,
    "end": 17.28,
    "text": "millions of react applications and for a good reason of course because any non-trivial react"
  },
  {
    "start": 17.28,
    "end": 24.72,
    "text": "app very likely needs routing needs to support different pages different components in the end"
  },
  {
    "start": 24.72,
    "end": 32.08,
    "text": "to be loaded for different url paths now with the release of react router version 7 which is the"
  },
  {
    "start": 32.08,
    "end": 38.48,
    "text": "latest version that was released a couple of months ago react router became even more powerful and"
  },
  {
    "start": 38.48,
    "end": 46.72,
    "text": "useful but maybe also a bit more confusing to learn and understand also because in my opinion"
  },
  {
    "start": 46.72,
    "end": 54.239,
    "text": "the official docs are good but maybe a bit hard to grasp if you're new to react router and if you"
  },
  {
    "start": 54.239,
    "end": 59.92,
    "text": "haven't followed along closely with all the surrounding blog posts and all the other information"
  },
  {
    "start": 59.92,
    "end": 66.88,
    "text": "you can gather from the internet and so on it can be a bit hard to understand how exactly you can use"
  },
  {
    "start": 66.88,
    "end": 75.28,
    "text": "react router which different features are supported and so on because react router now since version"
  },
  {
    "start": 75.28,
    "end": 84.88,
    "text": "7 supports two main modes of using it and that part is fairly obvious from the website too right at"
  },
  {
    "start": 84.88,
    "end": 91.759,
    "text": "the start of the official documentation so to say it tells you that you can use react router since"
  },
  {
    "start": 91.76,
    "end": 100.4,
    "text": "version 7 in two different modes one mode is the library mode as you already know and maybe love it"
  },
  {
    "start": 100.96,
    "end": 109.36,
    "text": "the other mode is the framework mode which in the end allows you to use react router as an alternative to"
  },
  {
    "start": 109.36,
    "end": 116.88,
    "text": "nextjs or other react frameworks so you can use react router to build full stack applications if you want"
  },
  {
    "start": 116.88,
    "end": 125.039,
    "text": "to and i'll get back to that now when it comes to the library mode when it comes to using react router as"
  },
  {
    "start": 125.039,
    "end": 134.16,
    "text": "a library you in the end can continue using it as you always did and by the way i wrote a book about react"
  },
  {
    "start": 134.16,
    "end": 141.04,
    "text": "react key concepts and a few weeks ago i released the second edition of that book and in that book i also"
  },
  {
    "start": 141.04,
    "end": 147.2,
    "text": "cover react router the latest version in death i show you how to get started with it how to use it in"
  },
  {
    "start": 147.2,
    "end": 152.72,
    "text": "your react apps how to use its data fetching and manipulation capabilities and much much more so if"
  },
  {
    "start": 152.72,
    "end": 158.239,
    "text": "you haven't already and if you like me also occasionally like picking up a book to learn stuff"
  },
  {
    "start": 158.239,
    "end": 164.959,
    "text": "you find a link in the video description and you can get this amazing book and learn all about react in"
  },
  {
    "start": 164.96,
    "end": 172.0,
    "text": "depth but back to react router when you use it in library mode so in the mode you've always used it"
  },
  {
    "start": 172.0,
    "end": 179.76,
    "text": "in so to say you also have two different ways of using it and that's where things can get a bit more"
  },
  {
    "start": 179.76,
    "end": 187.36,
    "text": "confusing because you can use it the way the official docs in the end tell you to use it you can add a"
  },
  {
    "start": 187.36,
    "end": 193.92,
    "text": "bunch of components special components exposed by the react router library you can use those components"
  },
  {
    "start": 193.92,
    "end": 201.44,
    "text": "in your react app to define routes nested routes and so on and therefore to in the end tell react"
  },
  {
    "start": 201.44,
    "end": 209.839,
    "text": "router which react components should be loaded for which url puffs and you've used react router like this"
  },
  {
    "start": 210.399,
    "end": 218.88,
    "text": "in the past too unless and that's where things may get tricky unless you upgraded to use the new data"
  },
  {
    "start": 218.88,
    "end": 226.64,
    "text": "fetching and manipulation capabilities introduced with react router version 6.4 so not 7 which is the"
  },
  {
    "start": 226.64,
    "end": 237.04,
    "text": "latest version but 6.4 and i'm mentioning that version because 6.4 was a huge update in 2022 that in"
  },
  {
    "start": 237.04,
    "end": 244.72,
    "text": "the end brought many features from the remix framework which is a next js alternative developed by the react"
  },
  {
    "start": 244.72,
    "end": 249.68,
    "text": "router team and i'll get back to that framework a little bit later because it matters for the story"
  },
  {
    "start": 249.68,
    "end": 256.72,
    "text": "of react router but back in 2022 with version 6.4 features from that framework were brought into react"
  },
  {
    "start": 256.72,
    "end": 266.0,
    "text": "router now not the server-side data fetching or rendering capabilities but client-side data fetching and"
  },
  {
    "start": 266.0,
    "end": 274.72,
    "text": "manipulation capabilities with version 6.4 you got new ways of creating a router with help of react router"
  },
  {
    "start": 274.72,
    "end": 283.04,
    "text": "of defining routes and you got tools to in the end set up functions that should be triggered when a route"
  },
  {
    "start": 283.04,
    "end": 290.64,
    "text": "is about to be loaded or when a form on a route is submitted and that allowed you to now not just use react"
  },
  {
    "start": 290.64,
    "end": 299.84,
    "text": "router to load components but it also helped you fetch data for those components for those to be rendered"
  },
  {
    "start": 299.84,
    "end": 306.8,
    "text": "components or handle form submissions by those route components so that you did not have to write that"
  },
  {
    "start": 306.8,
    "end": 313.36,
    "text": "logic on your own in your components you did not have to deal with using use effect for data fetching or"
  },
  {
    "start": 313.36,
    "end": 319.44,
    "text": "bring in an extra library you could instead just use react router and that was a pretty amazing"
  },
  {
    "start": 319.44,
    "end": 328.96,
    "text": "new react router version that was released back then now when they released version 6.4 they also"
  },
  {
    "start": 328.96,
    "end": 336.72,
    "text": "heavily advertised a different way of defining your routes you could say to define your routes not"
  },
  {
    "start": 336.72,
    "end": 344.8,
    "text": "with help of components provided by react router but instead as javascript objects in the end you could"
  },
  {
    "start": 344.8,
    "end": 351.28,
    "text": "still use components absolutely they gave you a way for that too but all the official examples started"
  },
  {
    "start": 351.28,
    "end": 360.0,
    "text": "with that component based definition approach and that approach is still perfectly viable and available"
  },
  {
    "start": 360.0,
    "end": 367.68,
    "text": "when working with react router 7. the tricky part just is that the official docs don't really mention"
  },
  {
    "start": 367.68,
    "end": 374.64,
    "text": "that at least not in the getting started a documentation for the library version of react router there you"
  },
  {
    "start": 374.64,
    "end": 381.36,
    "text": "see the older component based definition approach which again you can still use there's nothing wrong"
  },
  {
    "start": 381.36,
    "end": 388.88,
    "text": "with it it's just a bit weird that with the latest big release 6.4 so the one before version 7 they"
  },
  {
    "start": 388.88,
    "end": 398.08,
    "text": "introduced and advertised a new way of defining routes just to go back to the older way now with version 7."
  },
  {
    "start": 398.08,
    "end": 404.719,
    "text": "again both ways work it's just weird to see this switch in the recommended approach in the approach"
  },
  {
    "start": 404.719,
    "end": 411.84,
    "text": "that's first shown to you in the official docs because in those docs if you do select version 6.x the"
  },
  {
    "start": 411.84,
    "end": 419.52,
    "text": "latest version 6.6 version that was released you do start with that object-based route definition"
  },
  {
    "start": 419.52,
    "end": 424.64,
    "text": "approach and now with version 7 it's different again and that can be confusing and that's why i say"
  },
  {
    "start": 424.64,
    "end": 431.84,
    "text": "the official docs are not that great in my opinion because whilst they do cover various examples for"
  },
  {
    "start": 431.84,
    "end": 438.239,
    "text": "more advanced use cases you might want to handle with react router things like streaming data or handling"
  },
  {
    "start": 438.24,
    "end": 446.56,
    "text": "uh updates in an optimistic way which is all amazing while status covered which is good they do lack"
  },
  {
    "start": 446.56,
    "end": 452.56,
    "text": "a thorough introduction to the different ways you can get started with react router when using it in"
  },
  {
    "start": 452.56,
    "end": 460.48,
    "text": "library mode which is arguably still the mode i would guess most react apps use that library for the"
  },
  {
    "start": 460.48,
    "end": 467.6,
    "text": "library mode to bring it into a single page application and add routes but as mentioned before that is not"
  },
  {
    "start": 467.6,
    "end": 472.32,
    "text": "the only way of using it so we have that approach and it is a bit confusing from the official docs but"
  },
  {
    "start": 472.32,
    "end": 479.6,
    "text": "it essentially works just as it worked with version 6.x that's important there haven't been any huge"
  },
  {
    "start": 479.6,
    "end": 486.16,
    "text": "changes with the version 7 release so you can still use react router as it was in the past and as it is"
  },
  {
    "start": 486.16,
    "end": 492.16,
    "text": "covered in my book for example which by the way is updated for version 7 so i did include all the minor"
  },
  {
    "start": 492.16,
    "end": 500.48,
    "text": "changes uh that that affect react router in library mode in that book but besides that you can also use"
  },
  {
    "start": 500.48,
    "end": 507.92,
    "text": "react router in framework mode now and that's the big new thing that was released with version 7. now what"
  },
  {
    "start": 507.92,
    "end": 515.28,
    "text": "is that framework mode it in the end means that now you can also use react router as a replacement for"
  },
  {
    "start": 515.28,
    "end": 521.84,
    "text": "next js for example you can use it to build a full stack react application and seamlessly blend"
  },
  {
    "start": 521.84,
    "end": 527.84,
    "text": "backend and frontend code together in one and the same project and you could do that before too"
  },
  {
    "start": 527.84,
    "end": 535.68,
    "text": "not just with next js but also with remix which is an alternative framework to next js or should i say"
  },
  {
    "start": 535.68,
    "end": 542.88,
    "text": "which was kind of because remix was developed by the same people that also develop react router by the"
  },
  {
    "start": 542.88,
    "end": 549.92,
    "text": "same team well whilst developing remix and maintaining react router day in the end found out and they"
  },
  {
    "start": 549.92,
    "end": 556.4,
    "text": "document that in various blog posts they found out that there are a lot of similarities and that maybe"
  },
  {
    "start": 556.4,
    "end": 562.719,
    "text": "having react router and remix doesn't make too much sense which is why first they brought some of the"
  },
  {
    "start": 562.719,
    "end": 570.24,
    "text": "data fetching and manipulation capabilities into react router as i mentioned before and they also used react"
  },
  {
    "start": 570.24,
    "end": 576.16,
    "text": "router internally in the remix framework for the routing part but then they took it a step further in the end"
  },
  {
    "start": 576.16,
    "end": 584.8,
    "text": "and they now merged remix into react router and in the end it comes down to react router in framework mode"
  },
  {
    "start": 584.8,
    "end": 592.319,
    "text": "now using a viet plugin developed by the react router team that in the end will ensure that some parts of"
  },
  {
    "start": 592.319,
    "end": 598.719,
    "text": "your code are executed on the server only on the server if you want to you can configure it you could"
  },
  {
    "start": 598.719,
    "end": 605.52,
    "text": "also use the framework mode to build single page applications or to statically pre-render your react app but"
  },
  {
    "start": 605.52,
    "end": 612.72,
    "text": "you can also enable server-side rendering and then some parts of your code like most importantly the"
  },
  {
    "start": 612.72,
    "end": 618.64,
    "text": "code in your loader functions which are executed before a component is rendered and in your action"
  },
  {
    "start": 618.64,
    "end": 625.68,
    "text": "functions which are executed when a form is submitted that code will then only run on a server when using"
  },
  {
    "start": 625.68,
    "end": 631.36,
    "text": "that framework mode and since version 7 react router version 7 you don't need to use remix or anything like"
  },
  {
    "start": 631.36,
    "end": 638.56,
    "text": "that you can just create a project that uses that enables that framework mode so that uses this viet plugin"
  },
  {
    "start": 638.56,
    "end": 645.04,
    "text": "that enables all of that in the end you can just do that and then you can build full stack applications with react router"
  },
  {
    "start": 645.04,
    "end": 659.36,
    "text": "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"
  },
  {
    "start": 659.36,
    "end": 671.36,
    "text": "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"
  },
  {
    "start": 671.36,
    "end": 677.36,
    "text": "so you can do stuff in there that you could not do in there if those loaders and actions would execute on the client"
  },
  {
    "start": 677.36,
    "end": 691.36,
    "text": "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"
  },
  {
    "start": 691.36,
    "end": 705.36,
    "text": "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"
  },
  {
    "start": 705.36,
    "end": 733.36,
    "text": "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"
  },
  {
    "start": 733.36,
    "end": 763.34,
    "text": "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"
  },
  {
    "start": 763.34,
    "end": 792.3,
    "text": "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"
  },
  {
    "start": 792.3,
    "end": 809.42,
    "text": "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"
  },
  {
    "start": 809.42,
    "end": 811.42,
    "text": "you"
  },
  {
    "start": 811.42,
    "end": 813.42,
    "text": "you"
  }
]