react-router vs react-router-dom | Confronto dei pacchetti npm di "Routing in React"

Pacchetto	Download	Stars	Dimensione	Issues	Pubblicazione	Licenza

react-router	12,696,806	54,167	2.36 MB	266	il y a 11 jours	MIT
react-router-dom	11,616,798	54,167	5.44 kB	266	il y a 11 jours	MIT

Pacchetto

Download

Stars

Dimensione

Issues

Pubblicazione

Licenza

react-router

12,696,806

54,167

2.36 MB

266

il y a 11 jours

MIT

react-router-dom

11,616,798

54,167

5.44 kB

266

il y a 11 jours

MIT

Routing Core

react-router:
react-router fornisce le funzionalità di routing di base, inclusa la definizione di percorsi e la gestione della navigazione. È progettato per essere utilizzato in vari ambienti, inclusi server e applicazioni mobili.
react-router-dom:
react-router-dom estende react-router con componenti e funzionalità specifiche per il browser, rendendo più facile la creazione di applicazioni web con routing complesso.

Componenti Specifici del Browser

react-router:
react-router non include componenti specifici per il browser, rendendolo adatto per l'uso in ambienti non browser.
react-router-dom:
react-router-dom include componenti come BrowserRouter, Link e Route, che sono progettati per funzionare con il DOM del browser e semplificano la creazione di interfacce utente basate su percorsi.

Supporto per la Navigazione

react-router:
react-router fornisce API per la navigazione programmatica e la gestione della cronologia, ma non include componenti UI per la navigazione.
react-router-dom:
react-router-dom fornisce componenti come Link e NavLink che semplificano la creazione di collegamenti e la navigazione tra i percorsi.

Integrazione con il Browser

react-router:
react-router può essere utilizzato in qualsiasi ambiente React, ma non è ottimizzato per le applicazioni web.
react-router-dom:
react-router-dom è progettato specificamente per le applicazioni web e sfrutta le API del browser per gestire la navigazione e la cronologia.

Esempi di Codice

react-router:

Esempio di routing di base con react-router

import { Router, Route } from 'react-router';

const App = () => (
  <Router>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Router>
);

react-router-dom:

Esempio di routing di base con react-router-dom

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const App = () => (
  <Router>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Router>
);