Adding routing

[00:00 - 00:11] Adding routing. Right now we only have one window that greets the user and shows profile information. We want to let the user navigate between pages. To do this we'll use the React Router library.

[00:12 - 00:26] Define the resource screens. Create three new folders inside of the SRC, issues , repositories, and pull requests. Pull requests. Inside of each folder create an index file and the main component file.

[00:27 - 00:44] For example, in the issues we create new file index.ts. It will just re-expert everything from the issues module. Expert everything from issues. Then we define the main issues component called issues.tsx.

[00:45 - 01:13] For now it should just render a panel with text saying issues. Expert const issues is a functional component that renders a panel that renders text saying issues. The panel should have height. Ten lines, top 25% and left center. Repeat this for each of the remaining resources. Inside of the pull requests create index.ts.experts.

[01:14 - 01:36] Everything from pull requests. Create pull requests.tsx. Here define pull requests component with text saying pull requests. Same for repositories index.ts. Expert everything. And then define the repositories.tsx.

[01:37 - 01:45] Where we expert the repositories component. And the text says repositories. Okay, now define the routing scheme.

[01:46 - 02:01] Go to up.tsx and instead of welcome window render a switch block. Inside of which render route. The first one should match exact path route and it will render the welcome window component.

[02:02 - 02:22] Then define a route for issues that renders issues one for repositories that renders repositories and one for pull requests. That will render pull requests. And we've defined the three pages issues repositories pull requests plus the route page that will show the welcome window.