JIYIK CN >

React is a library for building dynamic, visually appealing UIs using reusable components. It is not a full-fledged framework with routing and other advanced features.

If you build advanced applications in React, you will need a proper system to navigate between pages. You have to install a React Routerseparate library called React to add this functionality to your React application.

React developers who install React Routerthe React library are often confused as to whether to install react-routerthe React package or the React.js library react-router-dom. The two are similar in many ways, but also different.

This article will compare them to help you decide which one you need.

React developers have three seemingly identical libraries to choose from: react-routerReact, react-router-domReact.js, and React.js react-router-native. Let’s start with the first one.

react-routerThe library contains all the functionality and custom components react-router-domfrom react-router-nativethe and libraries. You can think of it as a broad library that combines two more specific libraries.

react-router-nativeIt is built for React Native, a framework for building mobile applications in React.

React, on the other hand, react-router-domis the library you need to add routing capabilities to web applications built in React. If you are building a React application for the browser, then React react-router-domis what you need.

react-routerIn addition to all the custom components of the main library, react-router-domthe following components are included: <BrowserRouter>, <Link>an improved version of the component, and <NavLink>a custom component that you can use to automatically style activenavigation items.

In most cases, you don't have to import the main react-routerlibrary.

Let's react-router-domimport our custom LinkComponent from the package and log it to the console.

import { Link } from "react-router-dom";
export default function App() {
  console.log(Link);
  return <div className="App">Sample app</div>;
}

This is what the component looks like in the console Link.