Question

我是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>
    )}
}

Answer 1

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

例如

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

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

Answer 2

React Router使您可以将多个子代传递到单个# settings/base.py # other settings variable django_heroku.settings(locals()) STATIC_ROOT = 'common_static_root/' # this statement should be after the "django_heroku.settings(locals())"组件。以下将很好地工作（并且是recommended way of constructing routes as of React Router 5.1）：

<Route/>

请注意，我已将您的Route组件（带有组件prop）更改为只是一个Route组件，其路由内容指定为子代。

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

在单个Route路径中合并/渲染多个组件

2 个答案: