在BrowserRouter中，<Router>只能有一个子元素
在BrowserRouter中，<Router>只能有一个子元素
提问于 2018-03-01 14: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 15: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 09: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
复制相关文章
相似问题
腾讯云开发者
