Блог

мне нужно разработать интерфейс с помощью react js, но эта панель навигации не может работать так, как я ожидал. я разбавляю свой веб, не отображая полностью widht. как я решаю эту проблему?

это мой код панели навигации

 class Kepesertaan extends React.Component{
    render(){
        return(
            <Container>
                <Router>
                    <Row>
                        <Navbar className="navbar mr-auto" fixed="top" sticky="top" collapseOnSelect expand="lg">
                            <Navbar.Brand>Spuren</Navbar.Brand>
                            <Navbar.Toggle aria-controls="basic-navbar-nav"/>
                            <Navbar.Collapse id="basic-navbar-nav">
                                <Nav.Item className="navItem button"><Nav.Link as={Link} to="/CekIuran">Cek Iuran Masuk</Nav.Link></Nav.Item>
                                <Nav.Item className="navItem button"><Nav.Link as={Link} to="/ReleaseHasilPengembangan">Cek Iuran Masuk</Nav.Link></Nav.Item>
                                <Nav.Item className="navItem button"><Nav.Link as={Link} to="/InputAhliWaris">Cek Iuran Masuk</Nav.Link></Nav.Item>
                                <Nav.Item className="navItem button"><Nav.Link as={Link} to="/InputUploadIuran">Cek Iuran Masuk</Nav.Link></Nav.Item>
                            </Navbar.Collapse>
                        </Navbar>
                    </Row>
            </Container>
        )
    }
}

export default Kepesertaan
  

Вам не хватает закрытия Router :

     class Kepesertaan extends React.Component{
    render(){
        return(
            <Container>
                <Router>
                    <Row>
                        <Navbar className="navbar mr-auto" fixed="top" sticky="top" collapseOnSelect expand="lg">
                            <Navbar.Brand>Spuren</Navbar.Brand>
                            <Navbar.Toggle aria-controls="basic-navbar-nav"/>
                            <Navbar.Collapse id="basic-navbar-nav">
                                <Nav.Item className="navItem button"><Nav.Link as={Link} to="/CekIuran">Cek Iuran Masuk</Nav.Link></Nav.Item>
                                <Nav.Item className="navItem button"><Nav.Link as={Link} to="/ReleaseHasilPengembangan">Cek Iuran Masuk</Nav.Link></Nav.Item>
                                <Nav.Item className="navItem button"><Nav.Link as={Link} to="/InputAhliWaris">Cek Iuran Masuk</Nav.Link></Nav.Item>
                                <Nav.Item className="navItem button"><Nav.Link as={Link} to="/InputUploadIuran">Cek Iuran Masuk</Nav.Link></Nav.Item>
                            </Navbar.Collapse>
                        </Navbar>
                    </Row>
               </Router>
            </Container>
        )
    }
}

export default Kepesertaan