Question

有时我会看到像import React, { PropTypes} from 'react'这样的导入，并且不会导致任何问题。

但是当我尝试在我的代码import Router, { hashHistory } from 'react-router'中执行此操作时，我的渲染调用不会渲染任何内容。

当我将其更改为import { Router, hashHistory } from 'react-router'时，它就能正常工作。

这里的规则是什么？我什么时候可以在同一个导入语句中使用{}导入和不导入？当我无法导入时？在查看react-router代码时，它会将Router导出为defult。

Answer 1

当模块定义{}

时，您可以在不export default的情况下导入

react-router没有export default。

https://github.com/ReactTraining/react-router/blob/master/modules/index.js

export Router from './Router'
export Link from './Link'
export IndexLink from './IndexLink'
export withRouter from './withRouter'

/* components (configuration) */
export IndexRedirect from './IndexRedirect'
export IndexRoute from './IndexRoute'
export Redirect from './Redirect'
export Route from './Route'

/* utils */
export { createRoutes } from './RouteUtils'
export RouterContext from './RouterContext'
export { locationShape, routerShape } from './PropTypes'
export match from './match'
export useRouterHistory from './useRouterHistory'
export { formatPattern } from './PatternUtils'
export applyRouterMiddleware from './applyRouterMiddleware'

/* histories */
export browserHistory from './browserHistory'
export hashHistory from './hashHistory'
export createMemoryHistory from './createMemoryHistory'

也许您正在查看过去有react-router的旧版export default的代码

Version 1.0.x

/* components */
export Router from './Router'
export Link from './Link'
export IndexLink from './IndexLink'

/* components (configuration) */
export IndexRedirect from './IndexRedirect'
export IndexRoute from './IndexRoute'
export Redirect from './Redirect'
export Route from './Route'

/* mixins */
export History from './History'
export Lifecycle from './Lifecycle'
export RouteContext from './RouteContext'

/* utils */
export useRoutes from './useRoutes'
export { createRoutes } from './RouteUtils'
export RoutingContext from './RoutingContext'
export PropTypes from './PropTypes'
export match from './match'

export default from './Router'

混合默认导入和命名导入会改变代码的工作方式

1 个答案: