[00:00] We want to display the details of a certain employee by clicking on it and we want this to be available under a nested root. So essentially we need to create a new file inside the roots directory. Now if we walk into the root tree again then we would see that there is already a slash employees root entry and here we are using the default routing system which is the file based routing. Essentially that means that the location and the names of the files are going to constitute what the root is. So they are strictly aligned one to one.
[00:39] So if we want to create a slash employees slash employee ID route, then the directory and files need to follow that. So we are creating a new directory, and there is no problem that this is an employees TSX file and the directory has a very similar name, no problem here. We just need to create an employee ID TSX file. And since this is not a hard coded string, this is going to be a dynamic parameter, we're just going to prepend it with a dollar. So essentially, this is just the convention.
[01:14] So our dev server is running and Tanstack router has created the content of the file. Now we can see that the compiler is not up to date with the content of the file over here. Here we can see that the Tanstack router dev server has introduced a new entry over here. So it's slash dollar employee ID and the parent route is essentially the employees route. So this is all being taken care automatically.
[01:43] So we don't need to do it. Let's walk back here. So here we have that there is employees slash employee ID and what we need to do right now is to walk into the employees and we need to display a link. So we need to walk into the import and here we are going to import the link from tenstacks slash react-router and let's just use this li element over here and let's put the link element and this is going to wrap the employee name and what is also interesting for us is that we should pass what is the to over here. So this is essentially going to be employees slash employee ID.
[02:34] Now what is interesting is that we don't put the one, two, three or whatever, so this is just a string, but we need also to pass what are the parameters. So here the parameters that we need to pass over here and this is automatically figured out by the TypeScript definitions in TestEquator is that there should be the employee ID property which is going to be employee and here ID. Now in my data set ID is a number so what we could do is essentially cast it to a string. And that's it. So let's save it and let's take a look what we have over here.
[03:16] So we can see that there is a link. Now, if we walk into John Herzog, then nothing happens. Why is that? Because if this route has its own nested routes, then we need to include a nested outlet. So here we would need to pass a new outlet that is being again imported from tamstack slash react-router over here.
[03:42] So let's save the file over here and we can already see that there is a hello employees employee ID. So let's walk into this component and let's say that here we could just display that there is a name and there would be a hard-coded name John Doe which we're going to dynamize in a while. And here again walk into home, walk into employees. Now in employees there is no details over here so the outlet is here but it's essentially empty and after we click it then we can see that the internal outlet has been filled. Now, let's take a look at how this looks in TASTA Cruder.
[04:26] So again, let's walk into home, let's reload the whole application and we will see that after walking into employees we can see that there is a match however when we walk into John Herzog then we can see that oh there is both the root route there is employees and there is also employees slash and here comes the ID.
