react-router vs react-router-dom | Comparação de pacotes npm de "Roteamento em Aplicações React"

Pacote	Downloads	Stars	Tamanho	Issues	Publicado em	Licença

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

Pacote

Downloads

Stars

Tamanho

Issues

Publicado em

Licença

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

Suporte a Navegação

react-router:
O react-router fornece uma API de roteamento básica que pode ser usada em qualquer ambiente React, incluindo aplicações móveis e de renderização do lado do servidor.
react-router-dom:
O react-router-dom oferece suporte avançado para navegação em aplicações web, incluindo manipulação de histórico, links e navegação baseada em URL.

Componentes Prontos para Uso

react-router:
O react-router não inclui componentes prontos para uso, pois é projetado para ser uma solução de roteamento genérica que pode ser usada em qualquer tipo de aplicação React.
react-router-dom:
O react-router-dom inclui componentes prontos para uso, como Link, NavLink e Route, que facilitam a criação de interfaces de usuário baseadas em navegação.

Manipulação de Histórico

react-router:
O react-router fornece uma API básica para manipulação de histórico, mas não inclui funcionalidades específicas para aplicações web.
react-router-dom:
O react-router-dom integra-se perfeitamente com a API de histórico do navegador, permitindo navegação, retrocesso e avanço de forma intuitiva.

Flexibilidade

react-router:
O react-router é altamente flexível e pode ser usado em uma variedade de ambientes, incluindo aplicações móveis e de renderização do lado do servidor.
react-router-dom:
O react-router-dom é flexível dentro do contexto de aplicações web, mas é otimizado para aproveitar as funcionalidades específicas do navegador.

Exemplo de Código

react-router:

Exemplo de Roteamento com react-router

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

const history = createMemoryHistory();

function Home() {
  return <h2>Página Inicial</h2>;
}

function About() {
  return <h2>Sobre</h2>;
}

function App() {
  return (
    <Router history={history}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

react-router-dom:

Exemplo de Roteamento com react-router-dom

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

function Home() {
  return <h2>Página Inicial</h2>;
}

function About() {
  return <h2>Sobre</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Início</Link>
        <Link to="/about">Sobre</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}