Src > components > Navigator.js file will return all the Link codes. Link tags will have a to attribute that will act like a path attribute in the Route tag. Like said before we have to use the Link tag to implement the links. The keys for the configuration are the same that you would supply to the Route. Then we need to pass in our configuration. The first argument is the path to attempt to parse, it will be what you would see in the URL like /profile/1. Link tags are used to show navigational links in the UI. We'll first import matchPath, this is the mechanism that react-router uses to match paths via the Route component. With these simple steps, we already created a responsive route. Next, let's create two NavLink s, each pointing to two different products. First, let's add a parameter to our product route with path'/product/:id'. To implement the Navigational links we have implement the Link tag. Let's make our product page a bit more dynamic with the following changes. But still now we redirecting the page through URL, not from the navigation links. We have implemented the Route, Switch, Error page. To handle the Error Page we have added one new component under src > components > Error.js.īy adding that component in Route tag without specifying any path, we will navigate to that component if the URL not matched with our other Route paths. Import React from 'react' import export default App
0 Comments
Leave a Reply. |