Are you building a single application that is supposed to render multiple pages?.
Are you wondering what mechanism would best enable you to navigate between the different pages without having to refresh the whole page?. React Router is a powerful routing library that will enable you to achieve this. In this article, we will discuss what React Router is and the different components of React Router.
What is React Router
Routing is the process of keeping the browser URL in sync with what’s being rendered on the page. React popular library for creating single-page applications that are rendered on the client-side. Oftentimes, most SPAs are likely to have multiple views/pages, so when you click on a Link component, the app checks the route and loads the requested component without reloading the full page in the browser. Unlike conventional multiple pages, React Router lets you handle routing declaratively.
Different packages in React Router library
In the React Router library, there are three different npm packages with each serving a different purpose.
- react-router is the core library that is used as a peer dependency for the other two packages listed above.
- react-router-dom is the package that is used in React apps for routing.
- react-router-native has bindings to be used in developing React Native applications.
React Router Components
There are 4 basic React Router components commonly used in minimal navigation, they are Router, Route switch and Link.
Router:
It is recommended to import and use it at the top level component in a React app’s component hierarchy. Use it to wrap the component.
function App() {
return (
<Router>
<Routes>
<Route path="/" component={Home } />
</Routes>
</Router>
);
}
Switch:
We will need to import one more named export from react-router-dom, Switch. The Switch goes through each Route in order and once it finds a matching path, it will render the associated component. In the return statement, within the div container, we will include Switch and within the switch, we then define the Routes.Routes:
The component is one of the most important building blocks in the React Router package, that renders the appropriate user interface when the current location matches the route’s path. The Route is an upgrade from the Switch component. The path is a prop on the Route component that describes the pathname that the route should match.
<Route path=”/about”/>
The Route component provides three props that can be used to determine which component to render:
- component
<Route exact path=”/pets” component={Pet}/> Render: The render prop expects a function that returns an element when the location matches the route’s path, it normally comes in handy in the inline rendering.
const Pet = {category: “animal”} < Route exact path=”/pets” render={props => <Items {…props} data{Pet}/>} />Children: Just like the rendering, the children component works almost in the same way except, children gets rendered regardless of whether the path is matched with the location or not.
<Route children={props => <Items {…props}/>}/>
Link:
We will also import the resource,< Link/>, from react-router-dom. In order to avoid the refreshing of the web pages, we use the Link to wrap each of the link components. Link expects text inside as well as a prop, to inform it where to redirect when clicked.
<Link to="/sample">Click to redirect</Link>
Navlink:
This is a resource from the React Router package that serves as an alternative for Link
<NavLink to="/example" activeClassName="active">Click to redirect</Link>
Conclusion
React is an awesome library for single-page applications that require fast loading speeds and real-time updates based on the user's interactions. With routing, React delivers better management of resources and contributes to achieving good user experience, since the page doesn’t reload completely on every click. Check here for a demo on how routing works.