在单个路由路径中合并/渲染多个组件答案

【问题标题】：Merging/rendering multiple components in a single Route path在单个路由路径中合并/渲染多个组件
【发布时间】：2019-12-03 03:17:45
【问题描述】：

我是 React 新手，正在尝试将多个组件渲染到单个路由。在 React Router v5 中是否有适当/更有效的方法来执行此操作？在下面的示例代码中，我希望合并“addCategories”和“viewCategories”，因为它们将在同一条路线上。

class App extends Component{
render(){
    return(
        <Router>               
            <div>
                <Navbar bg="light" expand="lg">
                    <Navbar.Brand as={Link} to='/'>Asset Management</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="mr-auto">
                        <Nav.Link as={Link} to='/'>Home</Nav.Link>  
                        <NavDropdown title="Manage" id="basic-nav-dropdown">
                            <NavDropdown.Item as={Link} to='/manage/category'>Categories</NavDropdown.Item>  
                        </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
                <Route path='/' exact component={Home}/>
                <Route path='/manage/category'component={addCategories}/>
                <Route path='/manage/category'component={viewCategories}/>
            </div>
        </Router>
    )}
}

【问题讨论】：

标签： reactjs react-router single-page-application react-router-v5

【解决方案1】：

React Router 允许您将多个子级传递给单个 <Route/> 组件。以下将正常工作（并且是recommended way of constructing routes as of React Router 5.1）：

class App extends Component{
  render(){
    return(
      <Router>               
         <div>
            <Navbar bg="light" expand="lg">
              <Navbar.Brand as={Link} to='/'>Asset Management</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                  <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                      <Nav.Link as={Link} to='/'>Home</Nav.Link>  
                      <NavDropdown title="Manage" id="basic-nav-dropdown">
                      <NavDropdown.Item as={Link} to='/manage/category'>
                        Categories
                      </NavDropdown.Item>  
                      </NavDropdown>
                    </Nav>
                  </Navbar.Collapse>
                </Navbar>
                <Route path='/' exact component={Home}/>
                <Route path='/manage/category'>
                  <AddCategories />
                  <ViewCategories />
                </Route>
            </div>
        </Router>
    )}
}

请注意，我将您的 Route 组件（使用 component 属性）更改为只是一个 Route 组件，其路由内容指定为子级。

您必须以 PascalCase 命名您的组件，才能将它们作为 React 组件拾取 - 如果您以小写字母开头，它们将被推断为 HTML 元素！

【讨论】：

谢谢，这对于我的案例来说确实是一个更好的方法，我会注意在我的组件中使用 PascalCase。

【解决方案2】：

您可以渲染一个同时渲染<AddCategories /> 和<ViewCategories /> 的组件。

例如

class Categories extends React.Component {
    render() {
        return (
            <>
                <AddCategories />
                <ViewCategories />
            </>
        )
    }
}

然后在你的路线上 <Route path='/manage/category' component={Categories}/>

【讨论】：