使用React-Router-DOM点击Link无法跳转页面的问题求助

你的代码存在两个关键问题导致跳转功能失效：

• Route 属性拼写错误：Route组件里的exactpath是错误写法，正确属性名为path。同时 React Router v6 已移除exact属性，Routes组件默认会执行精确路径匹配，无需手动声明。
• 路由上下文未覆盖全部内容：页面顶部的<Quote />和标题位于Router组件外部，这部分内容不受路由控制。实际上Abraham组件已经在Routes位置渲染，但你可能未注意到。若希望跳转后替换页面内容，需将所有内容纳入Router内部。

修正后的App.js代码：

import React from 'react'
import Quote from './components/Quote';
import './index.css'
import Abraham from './components/Abraham'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <Quote />
        <h2>List of authors</h2>
      </div>
      <div>
        <Link to="/">Author1</Link>
      </div>
      <Routes>
        <Route path="/" element={<Abraham />} />
      </Routes>
    </Router>
  )
}

export default App;

现在点击Author1链接，Abraham组件会正常渲染在Routes指定位置。如果需要跳转后隐藏顶部静态内容，可以将静态内容封装到单独的路由组件中，或通过路由状态控制显示逻辑。

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