[00:00] Sometimes we might need to access the values of dynamic parameters of a root. In this case, we will use the root object again and use the useParams hook which returns an object that includes all the parameters of a certain root. So in this case this is just going to be employee id obviously without the dollar. Now this one is type safe so there is no union with undefined, the property is not optional etc. And that's because we have all the information about the type so the root is type safe on this level so there is no type information that TypeScript would lose and that's because we're relying on the root itself.
[00:42] So now let's say that for some reason after loading the employee details object from the external API, for some reason we didn't get the id property and we might just need to use the id from the root itself. So that's it and let's just update this. I'll just reload the application so after walking into the John Herzog employee we can see that this ID is displayed not from the data that was loaded but from the root itself. Now I mentioned that this is type safe and that's because we're relying on the root itself and that's true but things would look slightly different if we could use this hook globally. So we could say that we would detach this hook from this certain root.
[01:33] So in order to illustrate this, I'm going to use a component that is called EmployeeDetails that includes pretty much the same markup over here, so it displays the same thing. However, it accepts an employee object via prop. Now, I'm going to use this employee detail object over here and I'm just going to remove the whole markup over here and let me just put this employee details component and just put the employee prop that is going to be employee details object loaded like this. So let's just remove this root params over here, the one that was type safe and let's access the use params, the parameter of the root. So let me just import it from addTanstack slash react-router.
[02:25] And now what we get is an object that includes yet again some of the dynamic parameters of the roots. However, first TypeScript says that one argument is expected and none was passed. And that's because we need to pass an object of options. And the one that is interesting for us is the strict false so we need to explicitly say that hey we are detached from the root so we need to kind of consciously determine that this is not going to be type safe anymore. Now if we take a look what is being available on this object then it's not like everything like we cannot just put whatever here so it's only the employee ID.
[03:13] Here we can see that this is not being guaranteed anymore because we have no idea like where would we use actually this component. So if I want to display it now I can display directly only because I'm not doing anything on it. However if I wanted to provide any kind of a method over here on a string, whatever, then this could basically fail because this is not guaranteed to be a string. Now the question is I cannot put x or y or z or whatever, so how did TANStackRouter know that this employee ID thing exists here. So if we take a look at useParams, then we would see that there is a type parameter that is trouter extends any router, but this is by default a registered router.
[04:02] So this is our router, our global definition of the router from our application. So here we can see that this is essentially the only parameter of a route inside the whole application. So if we just play with our application and we create a new directory that is going to be called projects so just analogically to the projects component and we would create one more that would be $projects project ID and here I would just create an index.tsx file, a new component. Now I'm not going to even implement it, I just wanted this root to be generated and I also want to walk into root tree again to make sure that this one is actually created so that this path does exist. And after going back into the employee details component, let me just close this one over here, then we would see that yep, the project ID parameter also exists.
[05:06] So essentially, use params when detached from a root. It's just going to grab all the potential parameters that exist on any roots of the whole global router definition.
