react-router與react-router-dom有什麼不一樣？

一、react-router與react-router-dom是幹什麼的？

react-router: 實現了路由的核心功能
react-router-dom: 基於react-router，加入了在瀏覽器運行環境下的一些功能，例如：Link組件，會渲染一個a標籤，Link組件源碼a標籤行; BrowserRouter和HashRouter組件，前者使用pushState和popState事件構建路由，後者使用window.location.hash和hashchange事件構建路由。

二、從源碼分析react-router與react-router-dom有什麼區別？

// Type definitions for React Router 5.1
// Project: https://github.com/ReactTraining/react-router
// Definitions by: Huy Nguyen <https://github.com/huy-nguyen>
//                 Philip Jackson <https://github.com/p-jackson>
//                 John Reilly <https://github.com/johnnyreilly>
//                 Sebastian Silbermann <https://github.com/eps1lon>
//                 Daniel Nixon <https://github.com/danielnixon>
//                 Tony Ward <https://github.com/ynotdraw>
// 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<BrowserRouterProps, any> {}

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

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

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

能夠看出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組件當中，更加契合組件化思想（組件中的路由也應該包含在組件之中）。

三、在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(<Router routes={routes} history={hashHistory}></Router>, document.getElementById('app'))

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

export default function App(props) {
  return <div>
      <Link to='/About'>About</Link>
      <br />
      <Link to='/Repos'>Repos</Link>

      { props.children }
    </div>
}

// 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 (
  <Route exact path='/' component={App}>
    <IndexRoute component={Home}></IndexRoute>
    <Route path='/About' component={About}></Route>
    <Route path='/Repos' component={Repos}>
      <Route path='/Repos/:username/:repos' component={Repo}></Route>
    </Route>
  </Route>
)

在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 (
      <HashRouter>
        <div>
          <ul>
            <li><NavLink to='/About' activeClassName="active">About</NavLink></li>
            <li><NavLink to='/Repos' activeClassName="active">Repos</NavLink></li>
          </ul>
          <Route exact path='/' component={Home} /> // 指定默認路由，用Redirect組件也能夠實現
          <Route path='/About' component={About}></Route>
          <Route path='/Repos' component={Repos}></Route>
        </div>
      </HashRouter>
    )
  }
}

注意：Route組件必須由Router、HashRouter、BrowserRouter組件包裹

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