https://github.com/queeniecplusplus/react_navlink
dynamic variable path in URL
https://github.com/queeniecplusplus/react_navlink
navlink
Last synced: 4 months ago
JSON representation
dynamic variable path in URL
- Host: GitHub
- URL: https://github.com/queeniecplusplus/react_navlink
- Owner: QueenieCplusplus
- Created: 2020-08-07T15:31:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-07T16:07:21.000Z (almost 6 years ago)
- Last Synced: 2025-10-20T12:47:21.160Z (8 months ago)
- Topics: navlink
- Homepage: https://github.com/QueenieCplusplus/QuickGoThru#other-react-experience
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React_NavLink
dynamic variable path in URL
# NavLink (a Route with a dynamic param)
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.
const Contact = ( props ) => (
Contact Component
India Office
Us Office
Please select an office.
}/>
No office found.
}/>
);
const ContactInfo = ( props ) => Welcome to { props.match.params.location } office.
;
In 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.
Ref Doc
https://medium.com/jspoint/basics-of-react-router-v4-336d274fd9e0