React Router helps you navigate to the component of your choice and renders it in the HTML file.
To use it, you better know how to set up and integrate React Router with your React tool.
The following code imports and creates components named “Home”, “About”, and “Blog.
It also imports theRouteandRouteselements fromreact-router-dom.
TheRouteselement is the parent element that wraps the individual routes you create in your app component.
TheRouteelement creates a single route.
It takes two prop attributes: apathand anelement.
Thepathattribute defines the URL path of the intended component.
The first Route in the above code block uses a backslash (/) as its path.
This is a special route that React will render first, so theHomecomponent renders when you run your utility.
Do not confuse this system withimplementing conditional rendering in your React Components.
you could give thispathattribute any name you like.
Theelementattribute defines the component that theRoutewill render.
These components get into the various routes you’ve created.
Thelinkcomponent navigates to the Route with the corresponding pathname as its attribute and renders the Routes component.
This is mainly used when there is some similarity in the URL paths of the Routes.
The code block above imports and routes the created componentsArticles,NewArticle, andArticleOne.
There are some similarities in the URL paths between the three routes.
you’ve got the option to nest the three Routes rather than leaving them in their current state.
Like so:
You have wrapped the three individual Routes in a singleRouteelement.
Note that the parentRouteelement only has thepathattribute and noelementattribute that defines the component to render.
Theindexattribute in the first childRouteelement specifies that thisRouterenders when you navigate to the URL path of the parentRoute.
The component in the code block above contains the nested Routes that were formerly in the app component.
After creating the component, you should import it into theappcomponent and route it using a singleRouteelement.
