Play with the React-Router-Dom.
React Router Helps us to do routing in React apps and everything is a Component-Based in React Router.
- Dynamic Routing.
- First, we need to install Package Called react-router-dom.
npm i -s react-router-dom
create a routes.js file in your src directory like i shown in the below image.
In the routes.js file, we need to import the React and Routing Components.
Then we need to import the components which they need routing.
Like in above image i imported the App component and Posts Component.
Let's define a new Component with Routes.
What is the above code .....
I think it looks like very Interesting.
Link: Link component helps to define the navigation.
Route: Route Component helps to define the Routing.
exact: Please Load exactly App Component when my URL is /
Above all, we need to Wrap the Router Component.
that's it we are done with routing.
Now in your index.js, we need to add these Routes Component.
Open Your App.js file or a Component which you used in routing add console.log(this.props) to the code like in the below image.
Now run your dev server.
Have you seen anything in your Browser console?
The answer is React router passes the Object to our Component whenever we declare routes for that component.
For example, we defined the routes for App component and Posts Component.so that these Components are Now Aware of these Object in the Above image.
The Name tells the How to Navigate Programmatically it means Navigate me to the Some route whenever a program runs or some event happens.
For example when submitting a form.
I have already shown there is a history property available.
We can even be done with Other Ways But I'm showing with the help of history property.