{"id":32563066,"url":"https://github.com/blevs/react-nav-basic-recitation","last_synced_at":"2026-06-30T20:32:03.794Z","repository":{"id":39458493,"uuid":"198493341","full_name":"Blevs/react-nav-basic-recitation","owner":"Blevs","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-04T05:11:43.000Z","size":3889,"stargazers_count":0,"open_issues_count":23,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-29T02:56:53.060Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-23T19:13:39.000Z","updated_at":"2019-07-23T19:14:18.000Z","dependencies_parsed_at":"2023-02-01T22:32:32.587Z","dependency_job_id":null,"html_url":"https://github.com/Blevs/react-nav-basic-recitation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Blevs/react-nav-basic-recitation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-nav-basic-recitation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-nav-basic-recitation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-nav-basic-recitation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-nav-basic-recitation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blevs","download_url":"https://codeload.github.com/Blevs/react-nav-basic-recitation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-nav-basic-recitation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34983170,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-30T02:00:05.919Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-29T02:56:23.479Z","updated_at":"2026-06-30T20:32:03.789Z","avatar_url":"https://github.com/Blevs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Router Basic Nav\n\nTopics:\n\n* Single Page Applications\n* React Router V4 (react-router-dom)\n* Routing, declarative component based routing\n* Path and Component\n\n## Project Description\n\n* A starter pack project for all things React Router. Learn to set up a basic routing system within an application. Use this application to help guide your learning over the next couple of days.\n* **Note** that this project has already been boilerplated for you. There is no need to run any installation steps beyond `yarn install`.\n\n### Initialize Project\n\n* cd into the repository and run `yarn install`\n* run `yarn start`\n\n### Steps for implementing React Router\n\n* You'll notice we've already installed react-router-dom for you.\n* `import` your BrowserRouter as Router inside your `index.js` file.\n* Wrap your `\u003cApp /\u003e` component that you're passing to `ReactDOM.render()` with your new `Router` component.\n* open up your chrome `REACT DEV TOOLS` and notice your app is now all wrapped in `BrowserRouter`\n* inside the `REACT DEV TOOLS` expand `\u003cBrowserRouter\u003e` and highlight `\u003cRouter\u003e` and notice that here is a `\"history\"` object on props and a `\"match\"` object on its state. These two objects are how all of our Router is going to work. \n\n### Steps for \"Declaring\" your routes\n\n* Inside of your `App.js` file `import { Route } from 'react-router-dom';`\n* This is where we're going to declare and specify our router.\n* Create 3 `\u003cRoute /\u003e` setting their `path` prop equal to `/`, `/about`, `/contact` with their respective components.\n* Be sure to incluce the `exact` prop on the root component for `/` to make sure that it's rendering the exact component and not all the other components.\n\n### Steps for setting up your Navigation\n\n* Inside of `Navigation.js` `import { Link } from 'react-router-dom'`.\n* Declare the `to` as the href on `\u003cLink\u003e` and specify the correct routes for your app to navigate towards.\n* Head over to your app and start navigating. You should be able to see your URLS changing their paths as you go. Each path should display the proper component. \n\n### Resources\n\n* [Code Sandbox from Lecture](https://codesandbox.io/s/n58oqgwmP)\n* [React Router 4 Quick Start Guide](https://reacttraining.com/react-router/web/guides/quick-start)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblevs%2Freact-nav-basic-recitation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblevs%2Freact-nav-basic-recitation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblevs%2Freact-nav-basic-recitation/lists"}