{"id":25169723,"url":"https://github.com/sofiane-abou-abderrahim/react-router-basics","last_synced_at":"2026-04-13T07:02:01.453Z","repository":{"id":240250593,"uuid":"802033731","full_name":"sofiane-abou-abderrahim/react-router-basics","owner":"sofiane-abou-abderrahim","description":"This demo app highlights key React Router DOM features in a single-page app. ✨ Uses createBrowserRouter and RouterProvider for routing. ⚠️ Custom error pages with ErrorElement. 📌 Root Layout for navigation. 🔗 Links with Link Component. 🔄 Navigation with useNavigate Hook. 📂 Nested routing via Outlet Component. 🔍 Dynamic URLs with useParams Hook","archived":false,"fork":false,"pushed_at":"2024-10-28T00:07:32.000Z","size":3171,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T08:36:16.554Z","etag":null,"topics":["frontend","javascript","react","react-router","react-router-dom","reactjs","single-page-app","web-development"],"latest_commit_sha":null,"homepage":"https://sofiane-abou-abderrahim.github.io/react-router-basics/","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/sofiane-abou-abderrahim.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-17T11:46:12.000Z","updated_at":"2024-05-17T23:43:18.000Z","dependencies_parsed_at":"2024-05-17T15:58:42.216Z","dependency_job_id":"56ec9673-1f89-4619-9dc4-a60d882c8b6d","html_url":"https://github.com/sofiane-abou-abderrahim/react-router-basics","commit_stats":null,"previous_names":["sofiane-abou-abderrahim/react-router-basics"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-router-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-router-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-router-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-router-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sofiane-abou-abderrahim","download_url":"https://codeload.github.com/sofiane-abou-abderrahim/react-router-basics/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247071888,"owners_count":20878784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["frontend","javascript","react","react-router","react-router-dom","reactjs","single-page-app","web-development"],"created_at":"2025-02-09T08:36:23.594Z","updated_at":"2026-04-13T07:01:56.430Z","avatar_url":"https://github.com/sofiane-abou-abderrahim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Single-Page Application Routing\n\n## Multiple Pages in Single-Page Apps\n\n- What Client Side Routing is \u0026 Why Use it?\n- Using React Router\n- Data Fetching \u0026 Submission\n\n# Steps\n\n## 0. Starting Project\n\n1. create a new `README.md` file\n2. run `npm install react-router-dom`\n3. add a new `.gitignore` file \u0026 put `node_modules` inside\n\n## 1. Defining Routes\n\n1. in `App.js`, use `createBrowserRouter` imported from `react-router-dom`\n2. define the routes inside of this function\n3. add a new `pages` folder to hold the components that will be loaded as pages by the router\n4. inside of it, add a new `Home.js` file that contains the `HomePage` component\n5. in `App.js`, load the `HomePage` component when the `/` route is active with help of the `element` key property to establish the connection inside the `createBrowserRouter` function\n6. in `App.js`, use this `/` router:\n   1. store the returned value of the `createBrowserRouter` function in a `router` constant\n   2. use the `RouterProvider` component imported from `react-router-dom` to tell React that this `/` router should be loaded \u0026 should render the appropriate pages to the screen\n   3. set to it the special `router` prop \u0026 pass to it the `router` constant as a value\n7. run `npm start` to start the development server to see the content of the `\u003cHomePage\u003e` component rendered by the `/` router\n\n## 2. Adding a Second Route\n\n1. add a new `Products.js` component inside the `pages` folder\n2. in `App.js`, add a route for the `ProductsPage` component\n\n## 3. Exploring an Alternative Way of Defining Routes\n\n1. in `App.js`, call the `createRoutesFromElements` function imported from `react-router-dom`\n2. store its returned value in a constant called `routeDefinitions`\n3. add a `\u003cRoute\u003e` component imported from `react-router-dom` as an argument to this function\n4. inside this `\u003cRoute\u003e` component, add your nested route with a `path` \u0026 an `element` props\n5. call the `createBrowserRouter` function \u0026 pass the `routeDefinitions` constant to it as an argument\n6. store the returned value of this function to a constant named `router`\n7. pass this constant as a value to the `router` prop of the `\u003cRouterProvider\u003e` component\n\n## 4. Navigating between Pages with Links\n\n1. don't use the `\u003ca\u003e` so that you don't send HTTP requests when navigating\n2. in `Home.js`, instead, use the `\u003cLink\u003e` component imported from `react-router-dom` to navigate to the other pages\n\n## 5. Layouts \u0026 Nested Routes\n\n1. add a navigation bar to navigate to the pages\n   1. add a new `components` folder\n   2. inside of it, add a new `MainNavigation.js` file\n2. add some layout that wraps all these routes to render the main navigation\n   1. add a new `Root.js` file in the `pages` folder\n   2. add a new root in `App.js` \u0026 render the `\u003cRootLayout\u003e` component\n   3. add a special `children` property to wrap the other routes with this `\u003cRootLayout\u003e` component\n   4. in `Root.js`, use the `Outlet` component imported from `react-router-dom` to define where these child routes should be rendered\n   5. include the `\u003cMainNavigation\u003e` component above the `\u003cOutlet\u003e` component in `Root.js`\n3. apply some styling\n   1. add a new `Root.module.css` file\n   2. add a new `MainNavigation.module.css` file\n\n## 6. Showing Error Pages with errorElement\n\n1. add a new `Error.js` file in the `pages` folder\n2. add the special `errorElement` property to the route definitions in `App.js` to render the `\u003cErrorPage\u003e` component\n\n## 7. Working with Navigation Links (NavLink)\n\n1. replace the `\u003cLink\u003e` component with the `\u003cNavLink\u003e` component to let the link active after we click on it\n2. add the `className` prop to the `\u003cNavLink\u003e` component\n3. set a function to `className` where you pass to it the `isActive` property provided by `react-router-dom`\n4. add the `end` prop to the home link so that the CSS class applies only when the path ends with `/` and not when it begins with\n\n## 8. Navigating Programmatically\n\n1. call the `useNavigate()` function imported from `react-router-dom` in `Home.js` to trigger a navigation action\n2. add a dummy `\u003cbutton\u003e` \u0026 define a new `navigateHandler` function\n3. trigger the `navigateHandler` upon a click\n\n## 9. Defining \u0026 Using Dynamic Routes\n\n1. add a list of products in `Products.js`\n2. load a separate product detail page for the different products\n   1. add a new `ProductDetail.js` file\n   2. in `App.js`, define a new router with a dynamic `path` segment/parameter with a `:productId` as a placeholder \u0026 an `element` to render `\u003cProductDetailPage\u003e`\n   3. in `ProductDetail.js`, get hold of the actual value used instead of that `:productId` placeholder with help of the `useParams` hook imported from `react-router-dom`\n\n## 10. Adding Links for Dynamic Routes\n\n1. add some links to the product details pages in `Products.js` with help of the `\u003cLink\u003e` component\n2. define a `PRODUCTS` array with products\n3. render the list of products dynamically with the dynamic path\n\n## 11. Understanding Relative \u0026 Absolute Paths\n\n1. in `App.js`, remove the `/` slash before the `path` property to have relative paths instead of absolute paths\n2. in `Products.js`, change the path of the `\u003cLink\u003e` as a relative path\n3. in `Home.js`, change the path of the `\u003cLink\u003e` a relative path\n4. in `ProductDetail.js`, add a new paragraph with a `\u003cLink\u003e` component\n5. use the special `relative` prop in the `\u003cLink\u003e` component \u0026 set it to `path` as a value to go back one segment from the path\n\n## 12. Working with Index Routes\n\n1. add the special `index` property to the home page \u0026 set it to `true` to turn it into an index route\n2. this index route feature is an alternative to `path: ''` that allows you to define the default route that should be loaded if the parent route is active\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-router-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-router-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-router-basics/lists"}