Navbar inside Container react-bootstrap

Question

This Navbar below does not work, and the Container is causing the links to go to a 404 page. I have written it in many different ways as

• <Nav.Link href="" >Name</Nav.Link>
• <Nav.Link href={""} >Name</Nav.Link>
• <NavLink href="" >Name</NavLink>
• <NavLink href={""} >Name</NavLink>
• <Nav.Link href="" >Name</NavLink>
• <Nav.Link href={""} >Name</NavLink>
• <Nav.Link to="" >Name</Nav.Link>
• <Nav.Link to={""} >Name</Nav.Link>

They all work unless I take out <Container></Container>

The code below is not working but it makes it fluid.

    <>
      <Navbar variant='dark' fixed='top' collapseOnSelect expand='lg'>
        <Container>
          <Navbar.Brand href='/'>
            <img alt='' src={logo} width={"75"} height={"75"} />
          </Navbar.Brand>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />
          <Navbar.Collapse id='basic-navbar-nav'>
            <Nav className='m-auto'>
              <Nav.Item>
                <NavLink href='/artificial-reefs'>Artificial Reefs</NavLink>
              </Nav.Item>
              <Nav.Item>
                <NavLink to={"/marine-ecosystems"}>Marine EcoSystems</NavLink>
              </Nav.Item>
              <Nav.Item>
                <NavLink to={"/photos-videos"}>Photos & Videos</NavLink>
              </Nav.Item>
              <Nav.Item>
                <NavLink to={"#contact"}>Contact</NavLink>
              </Nav.Item>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </>

I have copied the Navbar from one of my other working sites.

<Navbar
        collapseOnSelect
        expand='lg'
        bg='dark'
        variant='dark'
        sticky='top'
      >
        <Container>
          <Navbar.Brand href='/' className='text-center'>
            Shadow Lakes
            <small className='d-block text-center'>
              Homeowners Association
            </small>
          </Navbar.Brand>
          <Navbar.Toggle aria-controls='responsive-navbar-nav' />
          <Navbar.Collapse id='responsive-navbar-nav'>
            <Nav className='m-auto'>
              <Nav.Link href='/'>Home</Nav.Link>
              <NavDropdown title='Minutes' id='collasible-nav-dropdown'>
                <NavDropdown.Item href='/2019-meeting-minutes' disabled>
                  2019
                </NavDropdown.Item>
                <NavDropdown.Item href='/2020-meeting-minutes' disabled>
                  2020
                </NavDropdown.Item>
                <NavDropdown.Item href='/2021-meeting-minutes' disabled>
                  2021
                </NavDropdown.Item>
                <NavDropdown.Item href='/2022-meeting-minutes' disabled>
                  2022
                </NavDropdown.Item>
              </NavDropdown>
              <NavDropdown title='About' id='collasible-nav-dropdown'>
                <NavDropdown.Item href='/frequently-asked-questions'>
                  Frequently Asked Questions
                </NavDropdown.Item>
                <NavDropdown.Item href='/approved-exterior-paint-colors'>
                  Approved Paint Colors
                </NavDropdown.Item>
                <NavDropdown.Item href='/board-members'>
                  Board Members
                </NavDropdown.Item>
                <NavDropdown.Item href='/deed-restrictions'>
                  Deed Restrictions
                </NavDropdown.Item>
                <NavDropdown.Item href='/bylaws' disabled>
                  Bylaws
                </NavDropdown.Item>
              </NavDropdown>
              <NavDropdown title='Forms' id='collasible-nav-dropdown'>
                <NavDropdown.Item href='/contact'>Contact</NavDropdown.Item>
                <NavDropdown.Item href='/complaint'>
                  Complaint/Violation
                </NavDropdown.Item>
                <NavDropdown.Item href='/estoppel-request'>
                  Estoppel Request
                </NavDropdown.Item>
                <NavDropdown.Item href='/architectural' disabled>
                  Architectural
                </NavDropdown.Item>
                <NavDropdown.Item href='/member-application'>
                  Join Board/Fine Committee
                </NavDropdown.Item>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

The only difference is the broken one is on React-Bootstrap 2.4.0, and the working one is on 2.3.0. I have switched to the 2.3.0 version, which didn't solve the issue of the broken Navbar. I'm not sure if it is a bug or if I have overlooked something.

Answer 1

根据 Netlify 的要求，使用/* /index.html 200将公用文件夹中的 _redirect 文件。