使用react-router-dom解决ReactJS导航跳转页面叠加显示问题

问题原因 #

1. 首页专属内容（顶部header图片）未封装到路由组件中，导致所有路由下都会显示该内容，与目标页面叠加。
2. 导航链接使用原生href属性，会触发页面刷新，不符合单页面应用的路由逻辑。

解决方案步骤 #

1. 导入路由导航组件 #

从react-router-dom中导入Link组件，用于实现单页面导航：

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

2. 抽离首页组件 #

将首页的专属内容封装到Home组件中，确保只有访问根路径时才显示：

function Home() {
  return (
    <img src={header} className="Header-Image" alt="header" />
    {/* 可添加更多首页内容 */}
  );
}

3. 配置完整路由规则 #

在Routes中添加根路径的路由，让不同路径对应不同页面组件：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/Logistic" element={<Logistic />} />
</Routes>

4. 替换导航链接为路由组件 #

将Nav.Link和Navbar.Brand的href替换为to属性，并通过as={Link}指定使用路由导航组件，避免页面刷新：

<Navbar.Brand as={Link} to="/">Далгъчев Транс ЕООД</Navbar.Brand>
<Nav.Link as={Link} to="/">Начало</Nav.Link>
<Nav.Link as={Link} to="/Logistic">Логистика</Nav.Link>

修改后的完整代码 #

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
// 需确保已导入react-bootstrap相关组件
// import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';

function App() {
  return (
    <Router>
      <div className="App">
        {/* 全局导航栏，所有页面均显示 */}
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
          <Container>
            <Navbar.Brand as={Link} to="/">Далгъчев Транс ЕООД</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="me-auto">
                <Nav.Link as={Link} to="/">Начало</Nav.Link>
                <Nav.Link as={Link} to="/Logistic">Логистика</Nav.Link>
                <NavDropdown title="Услуги" id="collasible-nav-dropdown">
                  <NavDropdown.Item as={Link} to="#action/3.1">Автомобилен транспорт</NavDropdown.Item>
                  <NavDropdown.Item as={Link} to="#action/3.2">
                    Въздушен транспорт
                  </NavDropdown.Item>
                  <NavDropdown.Item as={Link} to="#action/3.3">Железопътен транспорт</NavDropdown.Item>
                  <NavDropdown.Item as={Link} to="#action/3.4">Контейнерен транспорт</NavDropdown.Item>
                  <NavDropdown.Item as={Link} to="#action/3.5">Транспорт със собствени автомобили</NavDropdown.Item>
                </NavDropdown>
                <Nav.Link as={Link} to="#writeus">Заявки</Nav.Link>
                <Nav.Link as={Link} to="#contacts">Контакти</Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>

        {/* 路由切换区域，仅显示当前匹配的页面 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Logistic" element={<Logistic />} />
        </Routes>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <img src={header} className="Header-Image" alt="header" />
  );
}

function Logistic() {
  return <h2>Logistic</h2>;
}

export default App;

效果说明 #

• 导航栏保持全局显示，所有页面顶部都会出现。
• 访问/时仅显示Home组件（包含header图片），访问/Logistic时仅显示Logistic组件，不会出现内容叠加。
• 点击导航链接时不会触发整页刷新，符合单页面应用的交互逻辑。

内容的提问来源于stack exchange，提问作者Ben Johnson