Solid JS Tutorial #8 - Solid Router

Key Takeaways

so my friends we've learned some of the building blocks are solid now how to make components how to use props signals how to attach event handlers Etc but at the moment our site is still just one page which shows the app component content now typically websites have more than one page unless they're one of those pages that just Scrolls down for Infinity probably tries to say something at the bottom but generally we want to make more than one page right and the way that we make more pages with solid is to use something called the solid router which is a separate package that we need to install so over here we've got the solid router GitHub page and I'll leave this link Down Below in the video now if you scroll down a little bit you're going to see how to install this package right here so we want to copy this command and then head back to our project so we can install it so open up a terminal cancel out of the dev server process if you haven't already by pressing Ctrl and c and then just paste in this command and just remember to get rid of this little angle bracket at the start as well otherwise you might get an error when you press enter so press enter that's going to install the router package for us so that we can start implementing different routes and pages in the website and it's important to note as well that these pages and routes are purely going to be front-end pages and routes we won't ever be sending requests to the server for different HTML Pages whenever we go to a different route if we click a link in the site the way front end routers work is that all of the routing is handled in a browser so imagine we click on a link to go to a different route in the site for example to forward slash about then what the solid router will do is look at that route and say okay well for that route I'm going to swap the current component in the page for the about component and the HTML page is still the same HTML page we're just swapping out the content inside it depending on the route that we visit I hope that makes sense and that's pretty much the way any front-end router works whether it be solid react view or something else anyway if we go back to the docs we can see we need to do a couple of things first we need to wrap this router component which is imported from the solid router package around the root app component and we do that so we can use the router anywhere inside this app component or child components within the app component and then we can set up our different routes like this inside the app component and you can see that each route registers a component to show in the page when we visit that route okay so let's try setting this up in our application so I'm going to go back to our project and then open up the index.jsx file where we render this app components and we need to place the router component around that if you click on this it should Auto Import from solid.js which it has done so make sure that surrounds the app component meaning we can use the router and routes anywhere now inside what's inside this component so anywhere in the app component or nested components so let's save that and head back to the app component now where do we want to Output our routes or our page content well let's think about it we want this header to appear on every page we want the image the banner at the top to appear on every page so they don't go inside the routes but down here this is actually a page content so what I'm going to do is place the routes right about here and in here we can have our different route components okay one for each page now we need to make sure that these are imported from solid.js so what I'm going to do is go back over here and copy this thing this import so we import routes and routes from the solid JS router we'll do that up here so now what we could do is make a couple of different routes for different paths so for example I could say the path of this route is just forward slash and for that we want to show some kind of home page components so we could say the components are show here would be equal to the home component now we don't actually have that component so let's go ahead and make it and what I do is whenever we have page components I place them inside a Pages folder just to keep things organized I'm going to call this home Dot jsx and then I will create a new function and we'll export it as well so export default and then function and that function is going to be called home inside here all we want to do is output some content for the home page now the content I want to output for the home page is this stuff right here this grid of cards so I'm going to copy that or rather cut it and paste it inside a return statement right here so this is the template we're returning for the home page now in order for this to work we need to import the card component inside this file because we use the card so let's come up here we don't need it inside the app component anymore because we don't use it there and let's instead paste that at the top of this file so now we have a home page component we can register it down here by saying home I'm going to click on this to Auto Import it and it's imported it right here from the pages folder which is cool so now what we're saying is okay when we go to forward slash so the root path of the website I want you to show the home components and that's going to get rendered right here inside this routes component so when we go to the home page we're still going to show all this at the top and then when we go to the root component or rather the root route it's going to show the home component right here so if I save this everything so far should be pretty much the same because all we're doing is moving oops we need to make sure we're running to Dev server so npm run Dev but then when this runs everything should be the same we do get an error okay so that's because inside the pages folder we're trying to import the card and it has to come outside of the pages folder first of all so double dot then into the components okay so now everything is working the same way because we still have this card component all this stuff it's just that it's being rendered as the home page right here in the same place essentially but now what we can do is create further routes so for example I could create another route which would be forward slash cart and when we go to forward slash cart add one to render some kind of cart component or cart page so let's do that as well cart Dot jsx inside here we want to export a default function called cart and inside this we need to return a template now I'm just going to copy this from my repo so we don't have to type it out instead simple so all we're doing is having a div we give it a Max width class which is medium a margin in the y direction of strength a and then margin in the X direction of Auto and then we have a card it's rounded and inside that just an H2 which says your shopping cart now in order to do this we have to import the card component up here so import the card from dot dot forward slash to come out of the pages folder then into components then the card all right so now we have that component we can go ahead and register it right here card I'm going to click on that to import it at the top so it works and now my friends let me get rid of that space if we go over here we have to manually go to forward slash card not card sorry forward slash cart and then we get this card thing right here now at the minute that doesn't seem to be showing the title and I've just figured this out it's because I've stupidly inside the app component don't know why I've done this I've said I want to show the card component for when we go to forward slash card at cart instead I want to show the cart component so click on that to import it up here instead all right save this and now my friends we should see that card with the title inside it awesome so we go to the home page we get the home page content if we go to the cart page we get the cart page content now at the minute to go to these Pages we have to manually type out the address up here it would be nicer if we could have some links up here in the nav bar so we can just click on those to go to the different pages instead because at the minute when I'm going to the addresses manually I'm actually sending a full request to the server to get that HTML page back to start the whole application again and to put the right content in same for if I go to forward slash cart right here no matter what the route is I'm clicking enter so sending that request to the browser or rather the server to send back an index dot HTML page to the browser so what I'd like to do is Place some links up here instead when we click on those the solid framework is going to intercept those requests and it's just going to swap out the content instead so let me go back over here and we want to Output some links inside the header okay and they're going to come after the H1 so let me paste in a couple of anchor tags so the first one to forward slash and the second one to forward slash cart so let's save this and take a look and if we go to the home page yeah we see the home page cart we see the cart page so that's working however this is not the behavior that we want because when we're using these anchor tags what's happening is every time we click on one of these links it's sending a fresh request to the server for the HTML page again that's the behavior of anchor tax and I can show you that if we inspect over here and then go to the network Tab and what I'll do is just make this a little bit smaller I'm going to clear this but watch when I go to the carts page we're going to see a new HTML page over here so if I scroll up a little bit you can see we get a new document here so the HTML page right I'm going to clear this again and then if I go back home then again when we go up we're going to see that we get an HTML page all right so this is not the behavior we want what we'd like to do is tell solid look this is a link whereby I want you to intercept the request and I want you to just swap out the components in the page right here when we go to different routes and we do that by using a special link component called a that we get from solid.js router so we just import that and then instead of a small a we use that capital a component right here and down here and now this will work the way we want it to so I'm just going to refresh and then if we inspect again go to the network tab okay so now watch when I click on cart then we don't get that extra download from the server and that's because we're not now requesting all of that extra content from the server we are just telling solid to say okay well when we go to forward slash cart I will look at that request intercept it and then swap out the content for the cart page content because that's what we said right here so it looks at this looks at the component it needs to load in and it does that okay so that's pretty much it for the solid router at the minute there is more to the solid router and will certainly be exploring different features as we go forward but for now this puts us in a good place so we can have different pages in the next lesson what I'd like to do is show you how we can fetch data from somewhere and then take that data and inject it into a template so what we'll do is we'll fetch some product data and we'll cycle through that product data and output a card for each product that's coming in the next lesson