React JS中使用Link标签无法实现页面间导航跳转问题求助

你的代码存在两个核心错误导致点击导航页面无变化：

• Link组件的to属性传值不符合规范：该属性仅支持传入路由路径字符串，不能直接传组件对象、本地组件文件路径
• 仅配置了导航入口，未配置路由匹配规则：没有声明不同路径对应的渲染组件，点击Link只会修改浏览器地址栏，不会触发页面内容更新

• 补充引入路由匹配组件：当前react-router-dom v6为稳定主流版本，需要额外引入Routes、Route组件
• 修正所有Link的to属性为自定义路由路径字符串，例如/about、/login
• 在Router作用域内添加路由匹配规则，指定每个路径对应的渲染组件
• 如果你用的是旧版v5的react-router-dom，把Routes替换为Switch，element={组件}替换为component={组件}即可

import { BrowserRouter as Router, Link, Routes, Route } from 'react-router-dom';
import Login from './Login';
import About from './About';
import Announce from './Announce';
// 补全你原代码中用到的banner图片导入
import banner from '你的banner图片本地路径';

// 首页内容组件（避免直接在Home布局里递归渲染自身）
const HomeContent = () => {
  return <div>首页内容</div>
}

class Home extends Component {
  render(){
    return (
      <Router>
        <div>
          <div>
            <img src={banner} width="860" alt="banner"/>
          </div>
          <nav>
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/announce">Comments</Link></li>
              <li><Link to="/login">Login</Link></li>
            </ul>
          </nav>
          {/* 路由对应内容渲染区域 */}
          <Routes>
            <Route path="/" element={<HomeContent />} />
            <Route path="/about" element={<About />} />
            <Route path="/announce" element={<Announce />} />
            <Route path="/login" element={<Login />} />
          </Routes>
        </div>
      </Router>
    );
  }
}

export default Home;

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