Learn TypeScript 3 by Building Web Applications

Creating the lyrics view skeleton

While you're at it, you can already create the Lyrics page.

Create a lyrics.tsx file under frontend/src/pages and add the following code to it:

import React from 'react'; 
 
export const Lyrics = () => { 
    return <h2>Lyrics</h2>; 
}; 

Now that the page is created, you can add one more Route to the router.

Edit frontend/src/App.tsx again and add the following line within the BrowserRouter tag:

<Route path='/lyrics' component={Lyrics} /> 

This new route will activate when the URL is set to /lyrics. Go ahead and give it a try. If you go to http://localhost:3000/lyrics now, you should see the Lyrics component.

Here, we've shown you how to install and use react-router, a really popular routing library for React. If ...