一个 在BrowserRouter中可能只有一个子元素

Posted 2021-04-16

我试图将路由器上下文传递给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>
);

答案

正确的方法是使用context，而不是通过router作为道具。

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。

另一答案

您可以使用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