在开关内的相同路径中显示两个组件

Question

我需要设置一个显示容器组件的 switch 和一个 login 表单，当用户未在每个主要组件上进行身份验证时。

我找到了另一种解决方案，告诉您将两个组件包装在 div 中，以便在开关中的同一个 path 中使用它。但问题是我的一些组件使用路径中的 req.params 当它们被包裹在 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>)
}

Answer 1

尝试如下 -

<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

在开关内的相同路径中显示两个组件

Showing two component in the same path inside a switch

javascript

react-router-v4

react-router-dom