React Router路由失效求助：点击导航按钮无法跳转页面

问题1：导航栏Link目标路径格式错误 #

导航栏里的Link组件用了锚点格式（#about、#contact），但React Router的Link需要指向定义好的路由路径，而非页面锚点，这会导致点击后无法匹配对应路由。

修复：将Link的to属性改为对应路由路径：

import React from 'react';
import {Nav, Navbar, Container} from 'react-bootstrap';
import {Link} from 'react-router-dom';

let Navibar = () => {
  return (
    <>
     <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">My Portfolio</Navbar.Brand>
          <Nav className="me-auto">
            <Link to="/">Home</Link>
            <Link to="/About">About me</Link>
            <Link to="/Contact">Contact</Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
}

export default Navibar;

问题2：Contact路由路径缺少根斜杠 #

App组件中Contact的Route路径写为path="Contact"，正确的路由路径必须以斜杠/开头，否则会被识别为相对路径，无法匹配根路由下的页面。

修复：给Contact的路由路径添加斜杠：

<Switch>
  <Route exact path="/">
    <Home/>
  </Route>
  <Route exact path="/About">
    <About/>
  </Route>
  <Route exact path="/Contact">
    <Contact/>
  </Route>
</Switch>

可选优化：统一路径大小写（避免后续踩坑） #

路由路径区分大小写，建议统一使用小写格式，减少匹配异常：

• App组件路由修改：

<Switch>
  <Route exact path="/">
    <Home/>
  </Route>
  <Route exact path="/about">
    <About/>
  </Route>
  <Route exact path="/contact">
    <Contact/>
  </Route>
</Switch>

• 导航栏对应修改：

<Link to="/">Home</Link>
<Link to="/about">About me</Link>
<Link to="/contact">Contact</Link>

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