Adding Routes and Refactoring
In this lesson, we're going to add routes to our application
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:09] Let's add routes to our application now. Although we just have one page for now, we can create p6-calton for those routes to see if they work.
[00:10 - 00:21] First of all, let's clean the app.tsx file. I just wanted to show you that the API is working properly, so it's safe to remove everything from here.
[00:22 - 00:31] Starting from the top, let's remove the XEO's import. We react hooks, the logo import.
[00:32 - 00:46] We also don't have to maintain the state here, so let's get rid of everything here. And also, let's get rid of everything inside the return statement.
[00:47 - 00:59] We can keep empty brackets as we're up. Also, let's create a pages directory inside the src folder.
[01:00 - 01:08] And let's create three pages. The first one is home page.tsx.
[01:09 - 01:20] Next one is login.tsx. And the last one is detail page.tsx.
[01:21 - 01:32] Inside these files, let's create a basic component which renders ahead of calling out the file. Let's do it for home page.tsx file first.
[01:33 - 01:56] Import react from react const home page. And return the h1 tag which says template.
[01:57 - 02:07] And finally, let's export default home page. We can copy it for the other two files as well.
[02:08 - 02:25] And we just have to change the title. Inside the detail page, let's change home page to detail page.
[02:26 - 02:54] And inside the login page, let's change home page to the login. We can now go back to the app.tsx file and import route and switch from react router.
[02:55 - 03:18] Now instead of using component home page directly, we'll use route to render. For that, we will give it a path slash inside the quotation marks which will be our first page and inside the component, we will mention the home page.
[03:19 - 03:27] We can also use route to render the login page and the detail page. Let's copy it.
[03:28 - 03:41] For the login page, the path can be slash login and let's render login. And for the detail page, let's call it slash detail.
[03:42 - 03:53] This is going to be a dynamic page, but let's put detail here for the time. And inside the components, let's write the detail page.
[03:54 - 04:15] Make sure the components are imported automatically, if not, you can import them manually. We can wrap it with the switch component, which will make sure that it gives us the first matching component.
[04:16 - 04:38] Now we can write exact inside the route component. If you don't write exact, the home page will render every time because it will be always available as every route is separated by a slash and our home page is rendered on just slash.
[04:39 - 04:52] Now let's run the server and go to the browser and check if it's working properly. We can see the home page here.
[04:53 - 05:05] If we type slash login, we can see the login page and the same way, let's type detail here to see the display page. Amazing.
[05:06 - 05:10] Everything's working just fine now. work on the navigation bar in the next lecture.