{"id":19317588,"url":"https://github.com/queeniecplusplus/react_navlink","last_synced_at":"2026-02-21T03:01:42.755Z","repository":{"id":104588443,"uuid":"285863045","full_name":"QueenieCplusplus/React_NavLink","owner":"QueenieCplusplus","description":"dynamic variable path in URL","archived":false,"fork":false,"pushed_at":"2020-08-07T16:07:21.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-20T12:47:21.160Z","etag":null,"topics":["navlink"],"latest_commit_sha":null,"homepage":"https://github.com/QueenieCplusplus/QuickGoThru#other-react-experience","language":null,"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/QueenieCplusplus.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":"2020-08-07T15:31:49.000Z","updated_at":"2020-08-07T16:07:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"1e8557fc-2715-4d5e-9a64-e9b1178efa41","html_url":"https://github.com/QueenieCplusplus/React_NavLink","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/QueenieCplusplus/React_NavLink","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_NavLink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_NavLink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_NavLink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_NavLink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QueenieCplusplus","download_url":"https://codeload.github.com/QueenieCplusplus/React_NavLink/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_NavLink/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29672252,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T00:11:43.526Z","status":"online","status_checked_at":"2026-02-21T02:00:07.432Z","response_time":107,"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":["navlink"],"created_at":"2024-11-10T01:15:37.767Z","updated_at":"2026-02-21T03:01:42.728Z","avatar_url":"https://github.com/QueenieCplusplus.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React_NavLink\ndynamic variable path in URL\n\n\n# NavLink (a Route with a dynamic param)\n\n A Route can have a path that is dynamic or follow regex like pattern. For example, a Route can render a component if path is /about/xyz but xyz can be any variable string. This string is called as parameter and passed down to the component in match prop inside params object. If you want to introduce a Route with a dynamic parameter, then that parameter start with the colon : in the path like /about/:xyz so that React Router understands that xyz is a dynamic parameter.\n \n    const Contact = ( props ) =\u003e (\n        \u003cdiv\u003e        \n            \u003ch1\u003eContact Component\u003c/h1\u003e\n            \u003cdiv className=\"links\"\u003e\n                \u003cNavLink to={ `${props.match.url}/india` }\n                className=\"link\"\u003eIndia Office\u003c/NavLink\u003e\n                \u003cNavLink to={ `${props.match.url}/us` }\n                className=\"link\"\u003eUs Office\u003c/NavLink\u003e\n            \u003c/div\u003e\n            \u003cSwitch\u003e\n                \u003cRoute exact path={ props.match.url }\n                render={ () =\u003e \u003ch4\u003ePlease select an office.\u003c/h4\u003e }/\u003e\n                \u003cRoute path={ `${props.match.url}/:location` }\n                component={ ContactInfo }/\u003e\n\n            \u003cRoute render={ () =\u003e \u003ch2\u003eNo office found.\u003c/h2\u003e }/\u003e\n        \u003c/Switch\u003e\n    \u003c/div\u003e\n    );\n    \n    const ContactInfo = ( props ) =\u003e \u003ch1\u003eWelcome to { props.match.params.location } office.\u003c/h1\u003e;\n    \n\nIn above case, ContactInfo can also resolve /contact/japan which we don’t want because that’s not in our business case. Hence, to tell Route to only render ContactInfo component when location parameter is either us or india, we need to use regex pattern like below.\n\n      \u003cRoute path={ `${props.match.url}/:location(india|us)` }\n      component={ ContactInfo }/\u003e\n      \nRef Doc\n\nhttps://medium.com/jspoint/basics-of-react-router-v4-336d274fd9e0 \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueeniecplusplus%2Freact_navlink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqueeniecplusplus%2Freact_navlink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueeniecplusplus%2Freact_navlink/lists"}