react-router与react-router-dom有什么不同？

1、react-router与react-router-dom是干什么的？

react-router: 实现了路由的核心功能
react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

2、从源码分析react-router与react-router-dom有什么区别？

// Type definitions for React Router 5.1
// Project: https://github.com/ReactTraining/react-router
// Definitions by: Huy Nguyen 
//                 Philip Jackson 
//                 John Reilly 
//                 Sebastian Silbermann 
//                 Daniel Nixon 
//                 Tony Ward 
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8

import { match } from 'react-router';
import * as React from 'react';
import * as H from 'history';

export {
    generatePath,
    Prompt,
    MemoryRouter,
    RedirectProps,
    Redirect,
    RouteChildrenProps,
    RouteComponentProps,
    RouteProps,
    Route,
    Router,
    StaticRouter,
    SwitchProps,
    Switch,
    match,
    matchPath,
    withRouter,
    RouterChildContext,
    useHistory,
    useLocation,
    useParams,
    useRouteMatch,
} from 'react-router';

export interface BrowserRouterProps {
    basename?: string;
    getUserConfirmation?: (message: string, callback: (ok: boolean) => void) => void;
    forceRefresh?: boolean;
    keyLength?: number;
}
export class BrowserRouter extends React.Component {}

export interface HashRouterProps {
    basename?: string;
    getUserConfirmation?: (message: string, callback: (ok: boolean) => void) => void;
    hashType?: 'slash' | 'noslash' | 'hashbang';
}
export class HashRouter extends React.Component {}

export interface LinkProps extends React.AnchorHTMLAttributes {
    component?: React.ComponentType;
    to: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
    replace?: boolean;
    innerRef?: React.Ref;
}
export function Link(
    // TODO: Define this as ...params: Parameters> when only TypeScript >= 3.1 support is needed.
    props: React.PropsWithoutRef> & React.RefAttributes,
): ReturnType>;
export interface Link
    extends React.ForwardRefExoticComponent<
        React.PropsWithoutRef> & React.RefAttributes
    > {}

export interface NavLinkProps extends LinkProps {
    activeClassName?: string;
    activeStyle?: React.CSSProperties;
    exact?: boolean;
    strict?: boolean;
    isActive?(match: match, location: H.Location): boolean;
    location?: H.Location;
}
export function NavLink(
    // TODO: Define this as ...params: Parameters> when only TypeScript >= 3.1 support is needed.
    props: React.PropsWithoutRef> & React.RefAttributes,
): ReturnType>;
export interface NavLink
    extends React.ForwardRefExoticComponent<
        React.PropsWithoutRef> & React.RefAttributes
    > {}

可以看出react-router-dom是依赖于react-router的，其中Switch、Route、Router、Redirect等组件是直接引入react-router中的

export { Switch, Route, Router, Redirect } from 'react-router'

除此之外，react-router-dom还另外新增了Link、BrowserRouter、HashRouter组件。

因此，在引入react-router-dom后不需要显性引入react-router，react-router-dom依赖react-router，npm都会将他们安装。

react-router3.x与react-router-dom区别

react-router3.x版本下路由采用集中式配置，UI组件和路由是分开的。react-router4.x版本下路由路由采用分散式配置，路由嵌套在UI组件当中，更加契合组件化思想（组件中的路由也应该包含在组件之中）。

3、在react-router3.x是如下配置路由：

// index.js
import React from 'react'
import { render } from 'react-dom'
import { Router, hashHistory } from 'react-router'
import routes from './module/routes'

render(, document.getElementById('app'))

// App.js
import React from 'react'
import { Link } from 'react-router'

export default function App(props) {
  return 

      About
      

      Repos

      { props.children }
    
}

// routes.js
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import App from './App'
import Home from './Home'
import About from "./About"
import Repos from './Repos'
import Repo from './Repo'

export default (
  
    
    
    
      
    
  
)

在react-router-dom是如下配置路由：

// App.js
import React from 'react'
import { NavLink, Route, HashRouter, Redirect } from 'react-router-dom'
import Home from './Home'
import About from './About'
import Repos from './Repos'

export default class App extends React.Component {
  render() {
    return (
      
        

          

            
About
            
Repos
          
           // 指定默认路由，用Redirect组件也可以实现
          
          
        
      
    )
  }
}

注意：Route组件必须由Router、HashRouter、BrowserRouter组件包裹

参考：https://www.jianshu.com/p/595...
https://blog.csdn.net/weixin_...