引导导航栏无法在实时网站上运行

Question

我的导航栏是我使用BootrapleOff画布示例创建的，在我的本地环境中非常好。但是在将我的构建上传到一个实时网站后，导航链接会导致404错误，说明页面不存在。但是，底部的页脚能够正确地链接和加载页面。

这是我的海军：

import React from "react";

import logo from './logo_small.png';



import styled from 'styled-components';

import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Offcanvas from 'react-bootstrap/Offcanvas';



const Styles = styled.div`
    
  
  .test{
   color: black;
    &:hover{
      color: #30b849;
    }
  }
  
  .button{
    background-color: #30b849;
    color: white;
    padding: 5px 10px;
    border: 1px solid #30b849;
    transition: all 0.3s ease-out;
    margin-right: 5%;

    &:hover{
      background: #000066;
      color: white;
      transition: all 0.3s ease-out;
    }
  }

  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
  }
  
  .logo{
    margin-left: 10%;
  }
  
  
  
`;



function OffcanvasExample() {
    return (
        
        <Styles>
            {['xl'].map((expand) => (
                
                <Navbar key={expand} bg="white" expand={expand} className="navbar">
                    <Container fluid>
                        <Navbar.Brand href="/"><img className='logo' src={logo} alt="Depo App Logo"/></Navbar.Brand>
                        <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
                        <Navbar.Offcanvas
                            id={`offcanvasNavbar-expand-${expand}`}
                            aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
                            placement="end"
                        >
                            <Offcanvas.Header closeButton>
                                <Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
                                    <img src={logo} alt="Depo App Logo"/>
                                </Offcanvas.Title>
                            </Offcanvas.Header>
                            <Offcanvas.Body>
                                <Nav className="justify-content-lg-end flex-grow-1">
                                    <Nav.Link href="/" className="ps-3 pe-5 fs-5">Home</Nav.Link>

                                    <NavDropdown
                                        href = "/"

                                        className="ps-3 pe-5 fs-5"
                                        title="App"
                                        id={`offcanvasNavbarDropdown-expand-${expand}`}
                                        renderMenuOnMount={true}
                                    >
                                        <NavDropdown.Item href="/our-app">Our App</NavDropdown.Item>
                                        <NavDropdown.Item href="/lawyers">Lawyers</NavDropdown.Item>
                                        <NavDropdown.Item href="/freelancers">Freelancers</NavDropdown.Item>
                                    </NavDropdown>
                                    <NavDropdown
                                        className="ps-3 pe-5 fs-5"
                                        title="Company"
                                        id={`offcanvasNavbarDropdown-expand-${expand}`}
                                        renderMenuOnMount={true}
                                    >
                                        <NavDropdown.Item href="/about-us">About Us</NavDropdown.Item>
                                        <NavDropdown.Item href="/contact-us" >Contact Us</NavDropdown.Item>
                                        <NavDropdown.Item href="/tech-support">Tech Support</NavDropdown.Item>
                                    </NavDropdown>


                                    

                                    
                                </Nav>
                                <Nav.Link href="/sign-in" className="fs-5">Sign In</Nav.Link>
                                <Button href="/sign-up" className="button fs-5" >Sign Up</Button>
                                
                            </Offcanvas.Body>
                        </Navbar.Offcanvas>
                    </Container>
                </Navbar>
            ))}
        </Styles>
    );
}

export default OffcanvasExample;

下面是app.js：

import {BrowserRouter as Router, Switch, Route} from "react-router-dom";

import Nav from './components/Nav';

import './App.css';
import Home from './components/pages/Home/Home'
import SignIn from './components/SignIn/Form'
import SignUp from './components/SignUp/Form'
import Lawyer from "./components/pages/Lawyers/Lawyers";
import Freelancer from "./components/pages/Freelancers/Freelancers";
import About_Us from "./components/pages/About_Us/About_Us";
import Our_App from "./components/pages/Our_App/Our_App";
import Contact_Us from "./components/pages/Contact_Us/Contact_Us";
import Tech_Support from "./components/pages/Tech_Support/Tech_Support";
import Terms_Of_Use from "./components/pages/Terms_Of_Use/Terms_Of_Use";
import Privacy_Policy from "./components/pages/Privacy_Policy/Privacy_Policy";



function App() {
  return (
      <>

        <Router>
            <Nav/>
            <Switch>
                <Route path = '/' exact component={Home}/>
                <Route path = '/sign-up' component={SignUp}/>
                <Route path = '/sign-in' component={SignIn}/>
                <Route path = '/lawyers' component={Lawyer}/>
                <Route path = '/freelancers' component={Freelancer}/>
                <Route path = '/about-us' component={About_Us}/>
                <Route path = '/our-app' component={Our_App}/>
                <Route path = '/contact-us' component={Contact_Us}/>
                <Route path = '/tech-support' component={Tech_Support}/>
                <Route path = '/terms-of-use' component={Terms_Of_Use}/>
                <Route path = '/privacy-policy' component={Privacy_Policy}/>







            </Switch>
        </Router>

      </>
  );
}

export default App;

这是一个链接到实时网站：https://thedepoapp.com/

谢谢你的帮助！

Answer 1

您正在<NavDropdown.Item>上使用href，您应该只在<Nav.Link>组件上使用href。

您可以将下拉列表更改为以下内容：

<NavDropdown.Item >
    <Nav.Link href="/other-route">Other Route</Nav.Link>
</NavDropdown.Item>

有关更多细节，请参见文档：https://react-bootstrap.github.io/components/navs/#using-dropdowns