react router dom with redux multiple routes

Home.jsx, About.jsx and Contact.jsx those are the routes.

Navigation.jsx and Footer.jsx those are common for all routes.

In this article, we are building 5 components. So that the complete index.html file looks like the below. So, open index.html file in public directory and add the bootstrap CDN inside section. We can add bootstrap in our react application multiple ways and here I am using the Bootstrap CDN. We are using a bootstrap template to set up our view and it requires a Bootstrap CSS file. I personally recommend Visual Studio Code. Now we can use our favorite code editor to edit our project. Otherwise use the command below to install the latest version of the /react-router-dom package. This will install the latest version react-router-dom version 6 in our app.įrom version 6 onwards, the package has a lot of changes and you must confirm the version is 6.

So, open another terminal tab/window to run the below command. Note:- In the previous step, we have started the app in a terminal tab. So we are building a React app with multiple routes and it requires a package react-router-dom. The below GIF will make you understand the exact idea about the view and working of this app. Note that, /blog/ is a dynamic route where the post-slug changes with each post. Post page ( Displays post with the post-slug) The routes of the app and its corresponding view are described below. So, we need to create multiple routes to handle multiple views. Because React is not designed to develop multi-page websites.

Here we are going to build a website with multiple routes instead of multiple pages.

If you are interested to do it, then follow the article Multi-Page Application with React. Note:- I like to add a point to this article that, we can actually integrate React in a multi-page web application by developing a Webpack configuration that includes React components into generated static pages (i.e.

React router dom with redux multiple routes