Adding Routes and Refactoring

Adding routes#

Let's add routes to our application now. Although we just have one page for now, we can create a basic skeleton for those routes to see if they work. 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. Starting from the top, let's remove the axios import, the React hooks, and the logo import. We also don't have to maintain the state here, so let's get rid of it and everything inside the return statement. We can keep empty brackets as wrapper here. Also, let's create three pages inside the pages directory; Homepage.tsx, Login.tsx & DetailPage.tsx. Inside these files, let's create a basic component which renders a header calling out the file name. Let's do it for Homepage.tsx file first. Import React from react, const Homepage is equal to, and return the h1 tag saying Homepage. Finally, let's export it by default. We can copy it for the other two files as well, we just need to change the Title. Let's change Homepage to DetailPage, and here, let's change HomePage to Loginpage.

client/src/pages/Homepage.tsx#

xxxxxxxxxx

const Homepage = () => {

  return <h1>HOMEPAGE</h1>;

};

​

export default Homepage;

client/src/pages/DetailPage.tsx#

xxxxxxxxxx

const DetailPage = () => {

  return <h1>Detail Page</h1>;

};

​

export default DetailPage;