Learn in 
Configuring react router is probably the most painful things in react. There are thousands of tutorials and posts but none explains the production ready configuration. We will try to make this process easy. So follow along with this easy to understand Step by Step tutorial.
Without wasting much time, We will create two routes, /dashboard and /user. Once we have configured the setup correctly, we will test these routes to validate.
First, create a Create React App (CRA) scaffolding application using the command:
npx create-react-app react-routing-configThis command will create a bunch of files to get you started. We will modify some files and add few others. Before that, you need to install react router for everything to work fine. Install react router using the command:
npm install react-router-domThere is a confusion among developers as to which package to import,
react-router or react-router-dom ? Basically, react-router package has the core routing functionality. However, you dont have to use it directly.You should be using either
react-router-dom for a web application or react-router-native for a React Native application. In either case, react-router package will be installed automatically as a dependency.Thats all for the concepts!! Follow along, here is the step by step tutorial to configure routing:
1. Create Routes.js and create two pages for testing routing setup :
a. Create Routes.js :
loading...
b. Create Dashboard.js :
loading...
c. Create User.js :
loading...
2. Modify existing index.js and configure BrowserRouter :
loading...
3. Modify App.js and render all the routes :
loading...
4. Modify package.json to include homepage property as below :
loading...
Now start your application using
npm start command.Navigate to
http://localhost:3000/react-routing-config/, if eveything is setup properly, you should see a page similar to the below screen. The Dashboard screen will appear by default as it is configured as our default route.
When you click on the
User link, you should navigate to the User screen. Again on User screen, when you click on Dashboard link you should be taken back to Dashboard. This confirms that our client side routing is working fine as expected.For a full working application, refer to the "Download Source" section at the end of this tutorial.
Alright everything is working fine. But wait !! This is working fine only in your development environment as we have setup only client side routing configuration.
To make sure the application runs fine on production too, you need to do some configuration on your server side as well. Refer to this tutorial for the complete configuration for your favorite server : React Router Configuration - Apache Http Server, Nginx, Tomcat
Thats all folks !! Happy coding. If you feel this helped you, keep supporting us by or or below or on the articles on social media.
