Many websites are actually made up of a single page, but they look like multiple pages because they contain components which render like separate pages.
React Router enables the navigation among views of various components in a React Application, allowing us to change the browser URL, and keeps the UI in sync with the URL
To use React Router, you first have to install it using NPM:
npm install react-router-dom
You’ll need to import BrowserRouter, Route, and Switch from react-router-dom package
First, you’ll need to set up your app to work with React Router. Everything that gets rendered has to be wrapped inside the <BrowserRouter> element, so wrap component in those first. It’s the component that does all the logic of displaying various components that you provide it with.
Navigation Bar Component
Get Vinitha Subhash’s stories in your inbox
Join Medium for free to get updates from this writer.
Press enter or click to view image in full size
Wrapping BrowserRouter around Navigation bar, specify path and corresponding component to be loaded
“ReactHome” Page Component as specified in the above example <Route> Tag
“ReactRouter2” Page Component as specified in the above example <Route> Tag
“ReactRouterDescription” Page Component as specified in the above example <Route> Tag
