容器反應引導內的導航欄

Question

下面的導航欄不起作用，容器導致鏈接轉到 404 頁面。 我用許多不同的方式寫了它

• <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>

除非我取出<Container></Container> ，否則它們都可以工作

下面的代碼不起作用，但它使它變得流暢。

    <>
      <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>
    </>

我已經從我的其他工作站點之一復制了導航欄。

<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>

唯一的區別是損壞的在 React-Bootstrap 2.4.0 上，而工作的在 2.3.0 上。 我已經切換到 2.3.0 版本，它並沒有解決導航欄損壞的問題。 我不確定這是一個錯誤還是我忽略了某些東西。

Answer 1

根據 Netlify 的要求，使用/* /index.html 200將公用文件夾中的 _redirect 文件。