React Routing
Despite having a single HTML page with id=”root”, React client-side routing allows us to navigate through different ‘pages’ seamlessly, by rendering components instead of pages. Let’s pretend, that our routes look something like these:
https://www.mypage/
https://www.mypage/about
In React, we create Single Page Application, with single HTML, CSS, and JavaScript files unlike creating pages with other languages. In client-side routing, all these data rendered when the page loads unlike those using separate HTML pages. This provides the advantage of loading the data much faster when we click on the links (while they were preliminarily loaded) as we stored everything on the client-side. We mimic changing pages’ URLs, but in reality, we switch Components.
To start, first of all, we are to run the following line from our terminal:
npm install react-router-dom
Then, in App.jsx file, the following should be imported:
We have access to different essential properties, such as BrowserRouter, Route, Link, Switch, etc., as we already installed react-router-dom. In App container component we imported Router and Route (note that we imported BrowserRouter as Router, the latter is just a conventional word, we could name it whatever we wanted). Router can have only one element in it. If div element is deleted, it React would complain of an error, that’s why we passed div element to have access to multiple elements inside it, like NavBar and several Route. The Route component has two props, such as path, which shows the path it should go when redirected, and component, which takes the component we pass into, component={Home}. Both path and Component should match. It basically says, when I go to “/” path, render Home component. Another thing to notice here is that when we write path, the Home component will re-render each time we type “/”, even if we type about right after it (“/about”). This will cause an issue when used with other paths. To solve this problem, we need to be more specific, by explicitly declaring the exact path, which will render the component only when the path is ‘deeply equal’ to the value passed. Another way to address routing paths is to wrap Route-s in Switch, like in the example below:
With the help of Switch, we can now avoid specifying exact path-s.
To avoid code clutter, we could use separate Components to address the separate needs, which is in accordance with their main concept. Let’s take a look at the NavBar to see what it does.
We see that in NavBar, which is rendered first in our App component, we only used NavLinks imported from the same source, ‘react-router-dom’. We wrap the Home and About in NavLinks, which provides with a path, for example, to=”/about”. These NavLinks know nothing about the components that should be rendered, they only take us by the path provided. But if we take a step back we can notice that in App component these exact paths are already specified with the components after them to be rendered once the paths are matching.
Render vs component
To demonstrate the flexibility of Route-s, besides component, it can take another prop, render, which acts as a function by rendering whatever we want, unlike components, which will take a whole component (component={Home})
In the first example, by passing render, we run an arrow function which returns JSX (div element with the text ‘Hello World’). We can avoid passing a whole component, as was promised above. The second example is a bit more complicated (a bit more useful though). The routerProp is an object which is passed down the component with the help of spread operator, allowing the component which it is passed to have several props, such as match, location, history. We can also pass ‘ordinary’ props by typing something like data={this.state.data}. The example below serves as a demonstration of the usefulness of routerProp.
Instead of hardcoding the path, we provide match.url, which will match with the URL path of the parent component (path=’/about’), thus making the routes more dynamic and less error-prone.
Conclusion
React Routes make it possible to build Single Page Applications which work very similar to multiple pages, meanwhile having faster data loading, which facilitates navigation, saves from creating different pages, thus providing better user experience with less code. Awesome!
