在BrowserRouter中，<Router>只能有一个子元素
在BrowserRouter中，<Router>只能有一个子元素
提问于 2018-03-01 06:31:44
我正在尝试将路由器上下文传递给sidebar组件。我收到此错误。在react中，<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>
);回答 2
Stack Overflow用户
发布于 2018-03-01 07:47:38
正确的方法是使用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。
Stack Overflow用户
发布于 2018-03-02 01:07:10
您可以从react-router使用withRouter HOC。
import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'
const Sidebar = withRouter((props, context) => {...})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49043862
复制相关文章
![React Router v4教程：为你的 React 应用创建路由[每日前端夜话0x59]](https://ask.qcloudimg.com/http-save/yehe-1120945/hxf7oa61wz.jpeg)
相似问题
错误：<Router>只能有一个子元素。包含开关，以前使用过此代码
ConnectedRouter A <Router>可能只有一个子元素，但它有一个子元素
<Router>反应中可能只有一个子元素错误。
react-router-dom BrowserRouter在构建后无法正常工作
一个<Router>可能只有一个子元素
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
