Adding routing
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.
Lesson Transcript
[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.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)