Install Solid-Router and Use File System Routing to Create Routes
SolidStart is naturally unopinionated, so you can add whatever supported router you want.
When adding routes to our applications, our Routerc configuration tends to get bigger and bigger, not to mention we need to worry about lazy loading routes manually. One way to eliminate these issues is by using File System Routing.
In this lesson, we are going to add Solid-Router and leverage SolidStart FileRoutes to turn our files into routes for our application.
[00:00] Besides our app component, we now added a user folder with 3 new components. A user list component responsible for showing a list of users. A create user component which contains a form to gather user information. And a view user component, where we will show information for each individual [00:20] user. By default, SolidStart is router agnostic, which means we can add any supporting router of our choice. In this case, we'll install Solid Router. To do so, let's run 'pnpm add add solid js router'. Once installed, [00:40] this would be traditional component routing, where we route each path to a specific component. If we run our application and check our browser, we should see that our component is routing as expected. This routing practice works pretty well, but with time we tend to grow our imports and our routes. And let's not forget right now we're not [00:59] doing any lazy loading. To handle this issue, Solid Start introduced file based routing with the file routes component. To add file based routing to our project, let's delete all the routes and component imports from our app end, import file routes from SolidStart, and Suspense from SolidJS. [01:19] Now all we got to do is add file routes inside our router and make sure our router root can render the component that matches each route by passing its children inside the suspend boundary. To ensure file based routing works, SolidStart will work for our routes folder. So let's create it. Once that it's done, we can start moving our components there. [01:39] Let's start with our user list. The users list component is expected to be the base route we eat every time we visit our page, so we need to rename it index. Now the router knows to serve this page first. Let's now run our app and see if it worked. As you can see, our list is now our index page. The next step is to check [01:59] each individual user. And as you can see, right now we only go to a user's slash user id route not working. Let's fix it. So the router knows to match the slash users path, we need to create a users folder. And then move our view user component there. As we saw, each path will have the user's path followed by [02:19] the ID of the user we want to display. This is the ideal use case for a dynamic route. So let's open square brackets, write ID, and close square brackets. This means that now every time we visit a route that matches the pattern user slash user ID, this route will be served. Finally, now we need to serve our create [02:39] component every time we visit the slash new route. To do so, let's move our create user component to our routes folder and rename it new. Now if we check our app, we should see that it's working.