<Router> 在 BrowserRouter 中可能只有一个子元素答案

【问题标题】：A <Router> may have only one child element inside BrowserRouter<Router> 在 BrowserRouter 中可能只有一个子元素
【发布时间】：2018-08-09 04:15:04
【问题描述】：

我正在尝试将路由器上下文传递给sidebar 组件我收到此错误<Router> 可能只有一个子元素反应错误。

return (
  <BrowserRouter>
    {({ router }) => (
      <div style={{ display: 'flex', flex: '1' }}>
        {isAuthenticated &&
        <Sidebar
          router={router}
          rooms={currentUserRooms}
          onLogoutClick={this.handleLogout}
        />
        }
        <MatchAuthenticated exactly pattern="/" component={Home} {...authProps} />
        <RedirectAuthenticated pattern="/login" component={Login} {...authProps} />
        <RedirectAuthenticated pattern="/signup" component={Signup} {...authProps} />
        <MatchAuthenticated pattern="/r/:id" component={Room} {...authProps} />
        <Switch component={NotFound} />
      </div>
    )}
  </BrowserRouter>
);

【问题讨论】：

标签： reactjs react-router react-router-redux react-router-dom

【解决方案1】：

正确的做法是使用context，而不是传递router作为prop。

return (
  <BrowserRouter>
      <div style={{ display: 'flex', flex: '1' }}>
        {isAuthenticated &&
        <Sidebar
          rooms={currentUserRooms}
          onLogoutClick={this.handleLogout}
        />
        }
        <MatchAuthenticated exactly pattern="/" component={Home} {...authProps} />
        <RedirectAuthenticated pattern="/login" component={Login} {...authProps} />
        <RedirectAuthenticated pattern="/signup" component={Signup} {...authProps} />
        <MatchAuthenticated pattern="/r/:id" component={Room} {...authProps} />
        <Switch component={NotFound} />
      </div>
  </BrowserRouter>
);

像这样定义Sidebar：

import React from 'react'
import PropTypes from 'prop-types'

const Sidebar = (props, context) => {...}

Sidebar.contextTypes = {
    router: PropTypes.object,
}

然后从Sidebar 访问context.router。

【讨论】：

【解决方案2】：

你可以使用 react-router 中的 withRouter HOC。

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

const Sidebar = withRouter((props, context) => {...})

参考：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

【讨论】：