{"id":23045191,"url":"https://github.com/yshgroup/react-router-tutorial","last_synced_at":"2025-04-24T00:42:40.853Z","repository":{"id":218310052,"uuid":"735911291","full_name":"YSHgroup/react-router-tutorial","owner":"YSHgroup","description":"Created using the latest versions of React and React Router, this tutorial covers everything from basic to advanced routing concepts.","archived":false,"fork":false,"pushed_at":"2024-01-21T05:06:52.000Z","size":61,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T05:11:30.082Z","etag":null,"topics":["learn-react-router","react","react-router","react-router-dom-v6","react-router-tutorial","tutorials"],"latest_commit_sha":null,"homepage":"","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/YSHgroup.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}},"created_at":"2023-12-26T12:39:44.000Z","updated_at":"2025-01-08T03:51:00.000Z","dependencies_parsed_at":"2024-01-21T05:30:25.962Z","dependency_job_id":null,"html_url":"https://github.com/YSHgroup/react-router-tutorial","commit_stats":null,"previous_names":["yshgroup/react-router-tutorial"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YSHgroup%2Freact-router-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YSHgroup%2Freact-router-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YSHgroup%2Freact-router-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YSHgroup%2Freact-router-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YSHgroup","download_url":"https://codeload.github.com/YSHgroup/react-router-tutorial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250540939,"owners_count":21447426,"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":["learn-react-router","react","react-router","react-router-dom-v6","react-router-tutorial","tutorials"],"created_at":"2024-12-15T21:19:15.365Z","updated_at":"2025-04-24T00:42:40.831Z","avatar_url":"https://github.com/YSHgroup.png","language":"JavaScript","readme":"\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=https://reactrouter.com/en/main\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg width=\"480\" src=\"https://miro.medium.com/v2/resize:fit:720/format:webp/1*ipjusn5ilG-U4ZQPxIjFmw.png\" alt=\"React Router Dom\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-router-dom\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/v/react-router-dom\" alt=\"pacote da npm\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n# React Router Tutorial\n\nThis project is a comprehensive tutorial for `react-router-dom`, designed to teach you how to manage navigation and routing in React applications. Created using the latest versions of React and React Router, this tutorial covers everything from basic to advanced routing concepts.\n\n## Prerequisites\n\nBefore you begin, make sure you have the following installed:\n\n- Node.js (LTS version recommended)\n- npm or yarn as your package manager\n\n## Installation\n\nTo get started with this project, clone the repository and install the dependencies:\n\n```sh\ngit clone https://github.com/YSHgroup/react-router-tutorial.git\ncd react-router-tutorial\nnpm install\n```\n\nOr if you are using yarn:\n\n```sh\nyarn\n```\n\n## Running the Application\n\nStart the development server by running:\n\n```sh\nnpm start\n```\n\nOr if you are using yarn:\n\n```sh\nyarn start\n```\n\nThe application will launch in your default web browser at `http://localhost:3000`.\n\n## Features\n\nThe tutorial covers the following topics and features:\n\n- Basic Routing with `\u003cRoute\u003e`, `\u003cRoutes\u003e`, and `\u003cBrowserRouter\u003e`\n- Nested Routing and Layouts\n- Dynamic Route Parameters\n- Using `\u003cLink\u003e` and `\u003cNavLink\u003e` for navigation\n- Handling No Match (404) Routes\n- Route Preloading and Lazy Loading with React Suspense\n- Use of `useParams()`, `useLocation()`, `useRouteMatch()`, and `useHistory()` hooks\n\n## Built With\n\n- React - A JavaScript library for building user interfaces\n- React Router - The de-facto standard routing library for React\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/YSHgroup/react-router-tutorial/tags).\n\n## Authors\n\n- **Your Name** - Initial work - [YourUsername](https://github.com/your-username)\n\nSee also the list of [contributors](https://github.com/your-username/react-router-tutorial/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n\n## Acknowledgments\n\n- Thanks to the React Router team for providing such an excellent routing library.\n- Shoutout to everyone who has contributed to the React ecosystem making front-end development more approachable.\n\n## Related Documentation\n\nFor further reference, consult the official documentation:\n\n- [React Documentation](https://reactjs.org/docs/getting-started.html)\n- [React Router Documentation](https://reactrouter.com/en/main)\n\n---\n\nFeel free to customize the README to match the specific details and features of your tutorial project.\n\n---\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n- ![logo](https://miro.medium.com/v2/resize:fit:720/format:webp/1*ipjusn5ilG-U4ZQPxIjFmw.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyshgroup%2Freact-router-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyshgroup%2Freact-router-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyshgroup%2Freact-router-tutorial/lists"}