Basic react routing guide using react-router-dom.

Routing is a great way for users of a website to know exactly what the page they are loading is going to do. For example, the URL of a site such as Twitter consists of the Twitter domain: “Twitter.com”. Following the domain, there may be a user’s twitter handle which indicates that you are viewing a specific user’s posts. If a specific post is clicked, there would be additional text to indicate the exact post. Together, the twitter URL would look something like this: “https://twitter.com/{Twitter handle}/status/{Tweet ID}”.

Having established routes makes navigating a website extremely easy. If a web app project didn’t have any routing, then a user would have to be extremely well versed in how the app functions to be able to access a specific piece of information from repeated clicking to render different information, rather than typing the path to the file. Luckily for React developers, react-router-dom makes it very simple to add routing into a web app project.

The first step is to install react-router-dom, and all that takes is to navigate to the proper directory of the react project through the terminal and type:

npm install react-router-dom

once the package is installed, it can be imported into the different components of the React project. Depending on what functionality is needed, different aspects of react-router-dom can be imported. In the index.js file, BrowserRouter would be imported and wrapped around the code in the render block as such:

ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>,
document.getElementById('root')
);

To make use of react-router-dom, it is important to import Switch, Link, and Route in the components they are to be used in.

import { Switch, Route, Link} from 'react-router-dom'

Switch enables Route and Link to do their job and must be wrapped around anything that will be conditionally rendered based on the URL path.

Route takes a path and then anything written inside the Route tag will be rendered when that path is accessed.

Link sets a destination and anything written inside the Link tag will, when clicked, redirect the web browser to that destination.

an example of Switch, Route, and Link in react-router-dom

The above example shows the code all wrapped by the Switch tags. The Route tags has a path that leads to “/games” including some props that were passed down to the GamesCollection component. The Link tags wrap around an image as well as an h1 tag and on the actual webpage, clicking on either the image or “Enter” text will redirect the browser to “/games”.

It is important to note that the “home” path or just “/” path be written last because of some behavior of react-router-dom where the path is parsed letter by letter and if the “/” path is first, then any url will redirect to home because all paths begin with a “/”. By writing the “home” path last, this issue can be avoided altogether.

It is possible to create custom routes for each object in a database but that comes with another host of problems that I have previously written about so I will just leave a link to that post here:

An important detail regarding individual url paths generated by {match.url} in React

All in all, routing is an extremely useful and powerful tool in building responsive and intuitive websites and react-router-dom makes it incredibly easy to do so.