{"id":19598518,"url":"https://github.com/kaplanh/react-router-dom-example","last_synced_at":"2026-04-10T20:48:57.454Z","repository":{"id":223586078,"uuid":"760948857","full_name":"kaplanh/react-router-dom-example","owner":"kaplanh","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-21T15:26:15.000Z","size":436,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-09T07:47:46.933Z","etag":null,"topics":["axios-react","bootstrap5","conditional-rendering","navigate-component","navlink-element","nested-routes","private-routing","react-router-dom","reaxt","useeffect-hook","uselocation-hook","usenavigate-hook","useparams-hook","usestate-hook"],"latest_commit_sha":null,"homepage":"https://react-router-dom-example.vercel.app","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/kaplanh.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}},"created_at":"2024-02-21T00:31:26.000Z","updated_at":"2024-02-21T03:22:52.000Z","dependencies_parsed_at":"2024-02-21T03:07:50.064Z","dependency_job_id":"1ef504a3-0452-40ee-a6a7-a5e58e3427aa","html_url":"https://github.com/kaplanh/react-router-dom-example","commit_stats":null,"previous_names":["kaplanh/react-router-dom-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Freact-router-dom-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Freact-router-dom-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Freact-router-dom-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Freact-router-dom-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaplanh","download_url":"https://codeload.github.com/kaplanh/react-router-dom-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240876855,"owners_count":19871903,"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":["axios-react","bootstrap5","conditional-rendering","navigate-component","navlink-element","nested-routes","private-routing","react-router-dom","reaxt","useeffect-hook","uselocation-hook","usenavigate-hook","useparams-hook","usestate-hook"],"created_at":"2024-11-11T09:06:33.815Z","updated_at":"2026-04-10T20:48:52.428Z","avatar_url":"https://github.com/kaplanh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Router-Dom Example(with Axios)\n\n[:point_right: Click here to see on browser](https://react-router-dom-example.vercel.app/)\n\n![React-Router-Dom](https://github.com/kaplanh/react-router-dom-example/assets/101884444/1a8d9d3c-874e-4bb2-a085-9ed2678aac1c)\n\n\n\n---\n\n| **What's used in this app ?**                                                           | **How use third party libraries** | **Author**                                                                       |\n| --------------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------------------------------------- |\n| [React-Router-Dom](https://reactrouter.com/en/main/start/overview)                      | npm i / yarn add react-router-dom | [Take a look at my portfolio](https://kaplanh.github.io/Portfolio_with_CssFlex/) |\n| [useEfect() Hook componentDidUpdate()](https://react.dev/learn#using-hooks)             |                                   | [Visit me on Linkedin](https://www.linkedin.com/in/kaplan-h/)                    |\n| [useState() Hook](https://react.dev/learn#using-hooks)                                  |                                   |                                                                                  |\n| [CRUD OPERATIONS with axios API](https://www.npmjs.com/package/axios#axios-api)         | npm i/yarn add axios              |                                                                                  |\n| [react-events](https://react.dev/learn#responding-to-events)                            |                                   |                                                                                  |\n| [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/)            | npm i / yarn add bootstrap        |                                                                                  |\n| [React-icons](https://react-icons.github.io/react-icons/)                               | npm i / yarn add react-icons      |                                                                                  |\n|  [lifting state up](https://react.dev/learn/sharing-state-between-components)              |                                   |                                                                                  |\n| [props-drilling](https://react.dev/learn#sharing-data-between-components)               |                                   |                                                                                  |\n| [Semantic-Commits](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716) |                                   |                                                                                  |\n| Deploy with [Vercel](https://vercel.com/kaplanh)                                        |                                   |                                                                                  |\n| API [reqres](https://reqres.in/api/users)      |                                   |                                                                                  |\n\n---\n\n## How To Run This Project 🚀\n\n\u003cbr/\u003e\n\n### 💻 Install React 👇\n\n```bash\nyarn create react-app .  or npx create-react-app .\n```\n\n### 💻 Install Sass 👇\n\n```bash\nyarn add sass  or npm i sass\n```\n\n## 🔴 Delete these files and delete the imports👇\n\n    - App.test.js\n    - reportWebVitals.js\n    - setupTests.js\n    - favicon.ico\n    - logo192.png\n    - logo512.png\n    - manifest.json\n    - robots.txt\n\n### 💻 Start the project 👇\n\n```bash\nyarn start or npm start\n```\n\nOR\n\n-   \u003cstrong\u003eClone the Repo\u003c/strong\u003e\n\n    ```sh\n    git clone\n    ```\n\n-   \u003cstrong\u003eInstall NPM packages\u003c/strong\u003e\n\n    ```sh\n    npm install or yarn\n    ```\n\n-   \u003cstrong\u003eRun the project\u003c/strong\u003e\n\n    ```sh\n    npm start or yarn start\n    ```\n\n-   \u003cstrong\u003eOpen the project on your browser\u003c/strong\u003e\n\n    ```sh\n    http://localhost:3000/\n    ```\n\n-   ### \u003cstrong\u003eEnjoy! 🎉\u003c/strong\u003e\n\n---\n\n## Project Skeleton\n\n```\n react-router-dom-example(folder)\n|\n|----public (folder)\n│     └── index.html\n|----src (folder)\n|    |--- components (folder)\n│    │       ├── About.jsx\n│    │       ├── Courses.jsx\n│    │       ├── Footer.jsx\n│    │       ├── Nav.jsx\n│    │\n|    |--- img (folder)\n│    │\n│    |--- pages (folder)\n|    |      ├── Aws.jsx\n|    |      ├── Contact.jsx\n|    |      ├── Fulstack.jsx\n|    |      ├── Home.jsx\n|    |      ├── Logın.jsx\n|    |      ├── Next.jsx\n|    |      ├── NotFound.jsx\n|    |      ├── Paths.jsx\n|    |      ├── People.jsx\n|    |      ├── PersonDetaıl.jsx\n|    |      ├── React.jsx\n|    |\n|    |--- router (folder)\n│    │       ├── AppRouter.jsx\n│    │       ├── PrivateRouter.jsx\n|    |\n|    |\n│    ├--- App.js\n│    ├--- data.js.js\n│    |--- index.js\n│    |--- index.css\n│\n│\n|── .gitignore\n|── package-lock.json\n├── package.json\n|── README.md\n|── yarn.lock\n\n\n```\n\n---\n\n### At the end of the project, the following topics are to be covered;\n\n- React-Router-Dom\n\n```jsx\n//index.jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport \"./index.css\";\nimport { BrowserRouter } from \"react-router-dom\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\nroot.render(\n    \u003cReact.StrictMode\u003e\n        \u003cBrowserRouter\u003e\n            \u003cApp /\u003e\n        \u003c/BrowserRouter\u003e\n    \u003c/React.StrictMode\u003e\n);\n\n//App.jsx\nimport AppRouter from \"./router/AppRouter\";\n\nfunction App() {\n    return (\n        \u003c\u003e\n            \u003cAppRouter /\u003e\n            \n        \u003c/\u003e\n    );\n}\n\nexport default App;\n\n\n//router/AppRouter.jsx\nimport Nav from \"../components/Nav\";\nimport { Route, Routes } from \"react-router-dom\";\nimport Home from \"../pages/Home\";\nimport Paths from \"../pages/Paths\";\nimport People from \"../pages/People\";\nimport PersonDetail from \"../pages/PersonDetail\";\nimport Contact from \"../pages/Contact\";\nimport NotFound from \"../pages/NotFound\";\nimport Footer from \"../components/Footer\";\nimport Fullstack from \"../pages/Fullstack\";\nimport Aws from \"../pages/Aws\";\nimport Next from \"../pages/Next\";\nimport React from \"../pages/React\";\nimport PrivateRouter from \"./PrivateRouter\";\nimport Login from \"../pages/Login\";\nimport { useState } from \"react\";\n\nconst AppRouter = () =\u003e {\n    const [user, setUser] = useState(\n        JSON.parse(sessionStorage.getItem(\"user\")) || false\n    );\n    return (\n        \u003cdiv\u003e\n            \u003cNav user={user} setUser={setUser} /\u003e\n            \u003cRoutes\u003e\n                \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n                \u003cRoute path=\"/paths\" element={\u003cPaths /\u003e}\u003e\n                    \u003cRoute index element={\u003cFullstack /\u003e} /\u003e\n                    \u003cRoute path=\"fullstack\" element={\u003cFullstack /\u003e}\u003e\n                        \u003cRoute index element={\u003cReact /\u003e} /\u003e\n                        \u003cRoute path=\"next\" element={\u003cNext /\u003e} /\u003e\n                    \u003c/Route\u003e\n                    \u003cRoute path=\"aws\" element={\u003cAws /\u003e} /\u003e\n                \u003c/Route\u003e\n                \u003cRoute element={\u003cPrivateRouter user={user} /\u003e}\u003e\n                    \u003cRoute path=\"/people\" element={\u003cPeople /\u003e} /\u003e\n                    \u003cRoute path=\"/people/:id\" element={\u003cPersonDetail /\u003e} /\u003e\n                \u003c/Route\u003e\n                \u003cRoute path=\"/contact\" element={\u003cContact /\u003e} /\u003e\n                \u003cRoute path=\"/login\" element={\u003cLogin setUser={setUser} /\u003e} /\u003e\n                \u003cRoute path=\"*\" element={\u003cNotFound /\u003e} /\u003e\n            \u003c/Routes\u003e\n            \u003cFooter /\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default AppRouter;\n\n\n```\n   - Nested Router\n```jsx\n\n\nimport Nav from \"../components/Nav\";\nimport { Route, Routes } from \"react-router-dom\";\nimport Home from \"../pages/Home\";\nimport Paths from \"../pages/Paths\";\nimport People from \"../pages/People\";\nimport PersonDetail from \"../pages/PersonDetail\";\nimport Contact from \"../pages/Contact\";\nimport NotFound from \"../pages/NotFound\";\nimport Footer from \"../components/Footer\";\nimport Fullstack from \"../pages/Fullstack\";\nimport Aws from \"../pages/Aws\";\nimport Next from \"../pages/Next\";\nimport React from \"../pages/React\";\nimport PrivateRouter from \"./PrivateRouter\";\nimport Login from \"../pages/Login\";\nimport { useState } from \"react\";\n\nconst AppRouter = () =\u003e {\n    const [user, setUser] = useState(\n        JSON.parse(sessionStorage.getItem(\"user\")) || false\n    );\n    return (\n        \u003cdiv\u003e\n            \u003cNav user={user} setUser={setUser} /\u003e\n            \u003cRoutes\u003e\n                \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n                \u003cRoute path=\"/paths\" element={\u003cPaths /\u003e}\u003e\n                    \u003cRoute index element={\u003cFullstack /\u003e} /\u003e\n                    \u003cRoute path=\"fullstack\" element={\u003cFullstack /\u003e}\u003e\n                        \u003cRoute index element={\u003cReact /\u003e} /\u003e\n                        \u003cRoute path=\"next\" element={\u003cNext /\u003e} /\u003e\n                    \u003c/Route\u003e\n                    \u003cRoute path=\"aws\" element={\u003cAws /\u003e} /\u003e\n                \u003c/Route\u003e\n                \u003cRoute element={\u003cPrivateRouter user={user} /\u003e}\u003e\n                    \u003cRoute path=\"/people\" element={\u003cPeople /\u003e} /\u003e\n                    \u003cRoute path=\"/people/:id\" element={\u003cPersonDetail /\u003e} /\u003e\n                \u003c/Route\u003e\n                \u003cRoute path=\"/contact\" element={\u003cContact /\u003e} /\u003e\n                \u003cRoute path=\"/login\" element={\u003cLogin setUser={setUser} /\u003e} /\u003e\n                \u003cRoute path=\"*\" element={\u003cNotFound /\u003e} /\u003e\n            \u003c/Routes\u003e\n            \u003cFooter /\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default AppRouter;\n\n\n```\n\n-   Private Router\n\n```jsx\n//router/PrivateRouter\n\nimport React from \"react\";\nimport { Navigate, Outlet } from \"react-router-dom\";\n\n//? Navigate componenti sayfada gorulmeyen ve programsal olarak bir linkin\n//? bir baska linke yonledirilmesi icin kullanilabilir. (v5 -\u003e Redirect)\n//? Navigate, Component seviyesi Routing icin kullanilir.\n\nconst PrivateRouter = ({ user }) =\u003e {\n  // const user = true;\n  return user ? \u003cOutlet /\u003e : \u003cNavigate to=\"/login\" /\u003e;\n};\n\nexport default PrivateRouter;\n\n```\n\n- Login\u0026 Logout\n\n    ```jsx\n    //Nav.jsx\n        import { NavLink } from \"react-router-dom\";\n        import logo from \"../img/logo.png\";\n        \n        function Nav({ user, setUser }) {\n            return (\n        \u003cnav className=\"navbar navbar-expand-md navbar-light\"\u003e\n            \u003cdiv className=\"container-fluid\"\u003e\n                \u003cNavLink to=\"/\" className=\"navbar-brand\"\u003e\n                    \u003cimg src={logo} alt=\"\" /\u003e\n                \u003c/NavLink\u003e\n                \u003cbutton\n                    className=\"navbar-toggler\"\n                    type=\"button\"\n                    data-bs-toggle=\"collapse\"\n                    data-bs-target=\"#navbarSupportedContent\"\n                \u003e\n                    \u003cspan className=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n                \u003c/button\u003e\n                \u003cdiv\n                    className=\"collapse navbar-collapse\"\n                    id=\"navbarSupportedContent\"\n                \u003e\n                    \u003cul className=\"navbar-nav ms-auto mb-2 me-3 mb-lg-0\"\u003e\n                        \u003cli className=\"nav-item\"\u003e\n                            \u003cNavLink\n                                to=\"/\"\n                                className=\"nav-link active\"\n                                aria-current=\"page\"\n                            \u003e\n                                Home\n                            \u003c/NavLink\u003e\n                        \u003c/li\u003e\n\n                        \u003cli className=\"nav-item\"\u003e\n                            \u003cNavLink\n                                to=\"/people\"\n                                className=\"nav-link\"\n                                aria-current=\"page\"\n                            \u003e\n                                People\n                            \u003c/NavLink\u003e\n                        \u003c/li\u003e\n\n                        \u003cli className=\"nav-item\"\u003e\n                            \u003cNavLink\n                                to=\"/paths\"\n                                className=\"nav-link\"\n                                aria-current=\"page\"\n                            \u003e\n                                Paths\n                            \u003c/NavLink\u003e\n                        \u003c/li\u003e\n                        \u003cli className=\"nav-item\"\u003e\n                            \u003cNavLink\n                                to=\"/contact\"\n                                className=\"nav-link\"\n                                aria-current=\"page\"\n                            \u003e\n                                Contact\n                            \u003c/NavLink\u003e\n                        \u003c/li\u003e\n                        \u003cli className=\"nav-item\"\u003e\n                            {user ? (\n                                \u003cNavLink\n                                    to=\"/\"\n                                    className=\"nav-link\"\n                                    aria-current=\"page\"\n                                    onClick={() =\u003e setUser(false)}\n                                \u003e\n                                    Logout\n                                \u003c/NavLink\u003e\n                            ) : (\n                                \u003cNavLink\n                                    to=\"/login\"\n                                    className=\"nav-link\"\n                                    aria-current=\"page\"\n                                \u003e\n                                    Login\n                                \u003c/NavLink\u003e\n                            )}\n                        \u003c/li\u003e\n                    \u003c/ul\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/nav\u003e\n    );\n   }\n\n   export default Nav;\n\n\n    ```\n\n- useNavigate \u0026 useParams \u0026 useLocaation\n\n```jsx\n//People.jsx\n\nimport { useState, useEffect } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst People = () =\u003e {\n    const [people, setPeople] = useState([]);\n    let navigate=useNavigate()\n\n    const getPeople = () =\u003e {\n        fetch(\"https://reqres.in/api/users\")\n            .then((res) =\u003e res.json())\n            .then((data) =\u003e setPeople(data.data))\n            .catch((err) =\u003e console.log(err));\n    };\n    useEffect(() =\u003e {\n        getPeople();\n    }, []);\n\n    return (\n        \u003cdiv className=\"container text-center mt-4\"\u003e\n            \u003ch1\u003ePEOPLE LIST\u003c/h1\u003e\n            \u003cdiv className=\"row justify-content-center g-3\"\u003e\n                {people?.map((person) =\u003e {\n                    const { id, first_name, last_name, avatar } = person;\n                    return (\n                        \u003cdiv\n                            key={id}\n                            className=\" col-sm-12 col-md-6 col-lg-4\"\n                            type=\"button\"\n                            onClick={() =\u003e navigate(`${id}`, { state: person })}\n                        \u003e\n                            \u003cimg className=\"rounded\" src={avatar} alt=\"img\" /\u003e\n                            \u003ch6\u003e\n                                {first_name} {last_name}\n                            \u003c/h6\u003e\n                        \u003c/div\u003e\n                    );\n                })}\n            \u003c/div\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default People;\n\n\n\n//PeopleDetails.jsx\nimport React, { useEffect, useState } from \"react\";\n// import { useLocation} from \"react-router-dom\";\nimport {useNavigate, useParams } from \"react-router-dom\";\nimport axios from \"axios\";\nimport NotFound from \"./NotFound\";\nimport spinner from \"../img/Spinner-2.gif\";\n\nconst PersonDetail = () =\u003e {\n    //! navigate ile gonderilen state'i yakalamak icin useLocation Hook'u kullanilabilir.\n    //! Bu durumda veri, state ile geldigi icin yeniden fetch yapilmasina gerek kalmaz\n    // let { state: person } = useLocation();\n    let navigate = useNavigate();\n    // console.log(person);\n    //! Linkteki parametreyi almak icin useParams Hook'u kullanilabilir.\n    let { id } = useParams();\n    // console.log({ id });\n    const [person, setPerson] = useState({});\n    const [error, setError] = useState(false);\n    const [loading, setLoading] = useState(true);\n    // const getPerson = () =\u003e {\n    //     axios(`https://reqres.in/api/users/${id}`)\n    //         .then((res) =\u003e setPerson(res.data.data))\n    //         .catch((err) =\u003e {\n    //             setError(true);\n    //             console.log(err);\n    //         })\n    //         .finally(() =\u003e setLoading(false));\n    // };\n    // useEffect(() =\u003e {\n    //     getPerson();\n    //     // eslint-disable-next-line\n    //     // !warningden kurtulmak icin ya bunu ekleyebilirsin yada 2.yol seklinde yazabilirsin\n    // }, []);\n    \n    // !2.yol id her degistiginde getPerson fonk calistir\n\n    useEffect(() =\u003e {\n        const getPerson = () =\u003e {\n            axios(`https://reqres.in/api/users/${id}`)\n                .then((res) =\u003e setPerson(res.data.data))\n                .catch((err) =\u003e {\n                    setError(true);\n                    console.log(err);\n                })\n                .finally(() =\u003e setLoading(false));\n        };\n        getPerson();\n    }, [id]);\n\n    if (error) {\n        return \u003cNotFound /\u003e;\n    } else if (loading) {\n        return (\n            \u003cdiv className=\"text-center mt-4\"\u003e\n                \u003cimg src={spinner} alt=\"spinner\" /\u003e\n            \u003c/div\u003e\n        );\n    }\n\n    return (\n        \u003cdiv className=\"container text-center\"\u003e\n            \u003ch3\u003e\n                {person?.first_name} {person?.last_name}\n            \u003c/h3\u003e\n            \u003cimg className=\"rounded\" src={person?.avatar} alt=\"\" /\u003e\n            \u003cp\u003e{person?.email}\u003c/p\u003e\n            \u003cdiv\u003e\n                \u003cbutton\n                    onClick={() =\u003e navigate(\"/\")}\n                    className=\"btn btn-success me-2\"\n                \u003e\n                    Go Home\n                \u003c/button\u003e\n                \u003cbutton\n                    onClick={() =\u003e navigate(-1)}\n                    className=\"btn btn-warning\"\n                \u003e\n                    Go Back\n                \u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default PersonDetail;\n\n\n\n```\n\n- NavLink  \u0026 Link \u0026 useNavigate() \u0026 Navigate\n\n-   Semantic Commit Messages\n    See how a minor change to your commit message style can make you a better programmer.\n\n    Format: \u003ctype\u003e(\u003cscope\u003e): \u003csubject\u003e\n\n    \u003cscope\u003e is optional\n\n    -   Example\n\n    ```\n                feat: add hat wobble\n        ^--^  ^------------^\n        |     |\n        |     +-\u003e Summary in present tense.\n        |\n        +-------\u003e Type: chore, docs, feat, fix, refactor, style, or test.\n    ```\n\n-   More Examples:\n    -   `feat`: (new feature for the user, not a new feature for build script)\n    -   `fix`: (bug fix for the user, not a fix to a build script)\n    -   `docs`: (changes to the documentation)\n    -   `style`: (formatting, missing semi colons, etc; no production code change)\n    -   `refactor`: (refactoring production code, eg. renaming a variable)\n    -   `test`: (adding missing tests, refactoring tests; no production code change)\n    -   `chore`: (updating grunt tasks etc; no production code change)\n\n---\n\n## Feedback and Collaboration\n\nI value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out.\nI'm always open to collaboration and welcome the opportunity to work on exciting projects together.\nThank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!\n\n\u003cp align=\"center\"\u003e ⌛\u003cstrong\u003e Happy Coding \u003c/strong\u003e ✍ \u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Freact-router-dom-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaplanh%2Freact-router-dom-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Freact-router-dom-example/lists"}