javascript - 在交换机内的同一路径中显示两个组件
问题描述
当用户未在每个主要组件上进行身份验证时,我需要设置一个switch
显示容器组件和一个表单。login
我找到了另一种解决方案,它告诉您将两个组件包装在 a中,以便在开关div
中使用它。path
但问题是我的一些组件使用了req.params
路径中的 a ,当它们被包裹在div
function Routes(props) {
const noLoggedIn = [
{
path: "/",
exact: true,
component: () => <div>
<EventsListContainer />
<LoginFormContainer />
</div>
},
{
path: "/events/:id",
exact: false,
component: () => <div>
//when the component is mounted it doesn't get the :id
<EventDetailsContainer />
<LoginFormContainer />
</div>
}
]
return (<div>
{!props.authenticated &&
<Switch>
{noLoggedIn.map((route, index) =>
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
)}
</Switch>}
{props.authenticated &&
<Switch>
<Route exact path="/" component={EventsListContainer} />
<Route exact path="/" component={CreateEventFormContainer} />
//here the component gets the :id
<Route path="/events/:id" component={EventDetailsContainer} />
<Route path="/events/:id" component={CreateTicketFormContainer} />
</Switch> }
</div>)
}
解决方案
尝试如下 -
<Route path='/some-path' render={props =>
<div>
<FirstChild />
<SecondChild />
</div>
} />
你也可以这样做 -
render((
<Router>
<Route path="/" component={App}>
<Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
<Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
<Route path="users/:userId" component={Profile} />
</Route>
</Route>
</Router>
), node)
class App extends React.Component {
render() {
// the matched child route components become props in the parent
return (
<div>
<div className="Main">
{/* this will either be <Groups> or <Users> */}
{this.props.main}
</div>
<div className="Sidebar">
{/* this will either be <GroupsSidebar> or <UsersSidebar> */}
{this.props.sidebar}
</div>
</div>
)
}
}
class Users extends React.Component {
render() {
return (
<div>
{/* if at "/users/123" this will be <Profile> */}
{/* UsersSidebar will also get <Profile> as this.props.children.
You can pick where it renders */}
{this.props.children}
</div>
)
}
}
示例来自 - https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#named-components
推荐阅读
- xamarin - Xamarin 错误域=NSURLErrorDomain 代码=-1001“请求超时。”
- powerbi - Power BI - 表中忽略的关系
- arrays - Ruby 数组条件
- javascript - 如何在图像更改为以后使用之前从图像中获取 src?
- javascript - 如何在数组中找到最大的姓氏
- python - 列出不产生多个敌人 Pygame
- c# - 在通用 Windows 平台 C# 中使用 DeviceWatcher 填充 ComboBox
- excel - Excel VBA用右侧的数据填充左侧的空列,填充列的数量不同?
- c++ - Arduino - 如何将十六进制字节转换为其等效的 ASCII 字符?
- python - Pandas Grouper:如何使用偏移量和原点来获得自定义的每月频率?