Take advantage of React virtual DOM and create a single page application that behaves as a multiple page application. React Router DOM is a great tool to make this possible; in this article, I will explain how to use it. First things first Create a react application using the command . Set up your repo if you'd like, and let's get started! npx create-react-app app-name How it works React Router DOM will give the user the impression that is using a multiple page application. It takes advantage of the history or URL to render the view that you desire. This is particularly important if you want the user to go back to the previous render by clicking on the "go back to the previous page" button on the web browser. "Hello, world!" If you haven't already, install either using npm or yarn. Set up your project as you want, and let's go to the App.js file. Once you are on the file, erase everything and leave: react-router-dom React ; { ( )
} // App.js import from 'react' export default ( ) function App return < > div </ > div Now, we will be adding the React Router. Your file will now look something like this: React ; {
  BrowserRouter Router,
  Switch,
  Route,
  Link
} ; { ( )
} // App.js import from 'react' import as from 'react-router-dom' export default ( ) function App return < > div </ > div Quick element review: Router: This is the element that keeps track or the URL. This element provides the information to the other components to render the desired view. Switch: This is the conditional component that changes the views. Route: This is the component that renders the UI when the URL matches the path. Link: This is the component that changes the URL. Taking the previous components into consideration, this is how a basic "Hello, world" program would be: Next steps The "hello, world" program is straightforward, but when you start to modularize your code and create new files for each component, you can start adding more elements to it. For example, change the URL from within a rendered view, using the link. Like this: Home World < = > Route exact path "/world" < = > Link to "/" </ > Link </ > Route The possibilities from now on are limitless. You can generate a sophisticated SPA that looks similar to a MPA, but render faster since they don't have to communicate with a server. More tools The components mentioned in this article can be limiting, that's why I am going to show you additional ones, in the form of hooks: useParams: In the case, you are wondering how to render an infinite possibility of cases (like render a user homepage), you can use a Route similar to: < = > Route path "/users/:id" < /> Component </ > Route Inside the component element, we can use the hook use params to retrieve that id and use it. Here is a code of how it will work: React ; { useParams } ; { { id } = useParams(); ( )
} // Component.js import from 'react' import from 'react-router-dom' export default ( ) function Component const return { id } < > div </ > div What this code does, is it renders the id parameter provided by the URL. Now you can use the API to retrieve that user's information! useHistory: In case you want to change the URL using a function, this is the right hook. This is how you can use it: React ; { useHistory } ; { history = useHistory(); handleClick = {
  history.push( );
}; ( <button type="button" onClick={handleClick}>
        Click me!
      </button> )
} // Component.js import from 'react' import from 'react-router-dom' export default ( ) function Component const const => () '/home' return < > div </ > div Of course, in the previous example, I could use a link component, but it was designed to show the use of useHistory. It works better if you create a variety of elements from an array or an object literal, and don't know the correct path until rendered. This is just a scratch. The examples shown above are basic ones compared to the actual possibilities of React Router DOM. I encourage you to continue working and creating applications and projects to start testing the advantages of this tool. Happy coding!

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Creating a SPA that behaves as MPA with React

Too Long; Didn't Read

Lucas

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Creating a SPA that behaves as MPA with React

Too Long; Didn't Read

Lucas

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES