Handle Simple Routing with preact-router

[00:00] In this example we have an app component that renders a div, and inside that we have a user component that has a name and image property. Now let's add some routing to this application, so that a user can search for a GitHub user name.

[00:14] If we type shakyShane, for example, which is mine, then we want to navigate to the profiles/shakyShane page. Once there, we'll query the GitHub API using that search term that the user provided. To begin, we need to install preact-router. We'll type yarn add preact-router.

[00:40] Then we'll import it, we just need the router here from preact-router. We no longer need this user component here. Then we'll add the router. We can start adding the components that we want to match for a certain path. When we hit the home page like this, we'll have a home component, we'll say that just matches the path /.

[01:05] Now we need to create this file. We'll call it home.js, we'll grab this import, place it in there. Now we don't actually need this component here, this is going to be a stateless function, so we'll export default function, call this home, and then we'll return some user interface.

[01:30] We'll use a section tag as a wrapper for the rest of our elements, then we'll have a title saying enter a GitHub user name. Then we'll create an input with a type of search, this will allow this input to act much like a form.

[01:46] Give it a placeholder, and then we'll say onSearch, we'll grab hold of the event, and then we're going to call a search method that we'll write in a moment. We need to pass to it the search term, which we can get from the event.target.value. Now let's close that input, and now let's get this rendering to the screen.

[02:09] Back in our app file, where we have the home component here, we can import this now, so import home from home. If we hit save, you can see we now have the input field on the screen. Now back to that search method.

[02:27] From preact-router, we have a function called route, which is how we can navigate around our application. We'll import that from preact-router, and then we'll create a function her called search.

[02:39] This will get the query, and then we can just call route, pass in /profile, this is a path in a component that we haven't written yet, but we'll get to that. Then we'll encode the query so that's a valid URL.

[02:56] At this point, if I type here shakyShane, hit enter, we're not going to get anything, because we haven't implemented the profile route yet, so let's go and do that. Back in the app we'll add another component here called profile.

[03:13] This will match the path profile/:user. With this, we're instructing the router to match paths that begin with profile, then have a slash, and the next segment in the URL we've chosen to name it user here. This means that inside the profile component, we'll get a property called user, and it will be equal to whatever the string is here.

[03:40] If we type profile/hello, inside the profile component now, we'll have props.user available to us, and it will be set to the string hello. This is how we'll build the profile page, because we'll use this string to query GitHub's API and then display the results. Now let's build this profile component.

[04:03] We'll create a new file called profile.js, and I've prepared a file in advance here. We import HM component from preact as we do with all component, and we use the user component that we saw at the beginning of the lesson, which is just that user card that has image and name properties.

[04:24] Then we create a class and in the constructor we set some initial state. As soon as this route loads, we'll hit the API and this could take a second or two, so we always start with a loading state of true, and the user to be null.

[04:42] Then we use the componentDidMount lifecycle event as the trigger for our API call. When preact puts this profile component into the page, this method will fire, and we can fetch some data from GitHub's API. This is the static part of the URL that never changes, and you can see here that we're accessing this.props.user.

[05:01] This is the part that's been set by preact's router, and we take the response, convert it to JSON, and if it's successful, we set the user on the state, and we set loading to false. In the render method, we're just extracting loading and user directly from the state, and then we're either showing a loading indicator, or that user card.

[05:26] Now back in the app file, we can import this component, and if we go back to the home page, and now type shakyShane, hit enter, and you can see we have the data being fetched from GitHub's API, based on what was provided in the URL here.

[05:44] Now to finish this example off, we can look at how to handle unmatched paths, as well as how to use regular links to navigate with the router. Let's create an error component, and we'll say this is the default.

[05:58] This is how you let preact-router know what to do if none of the other paths match. We'll import error from error, and we'll create that file. We'll create a default export, and we'll just return div, we'll say sorry, there was an error with that path, and then we'll provide a link to go back home.

[06:18] We can use a regular anchor here, just say home. Now if we go to a URL that's not matched by the router, it will show this error component, and give us a link to go back home. If we click this, you can see we navigate correctly.