React.js中点击Navbar按钮实现不同组件间路由跳转的方法咨询

你当前的代码存在路由配置不规范、导入错误、路径引用偏差三类问题，按以下步骤修改即可实现点击跳转效果：

• 导入错误：多处从react-router导入路由组件，且存在大量无用的路由相关导入
• 缺少根路由容器：没有使用BrowserRouter包裹应用的路由节点，路由规则无法生效
• 路由语法不兼容：当前主流的react-router-dom v6版本不再支持直接在Route标签内嵌套组件的旧写法
• 路径引用错误：App组件位于src/UI目录下，直接写./components无法找到对应组件文件
• 注释偏差：NavBar组件的路径注释错写为Contact.js路径，不影响运行建议自行修正

1. 修正NavBar组件（路径：src/component/NavBar.js） #

import classes from "./NavBar.module.css";
// 仅保留必要的Link导入
import { Link } from "react-router-dom";

const NavBar = (props) => {
  return (
      <div className={classes.navbar}>
        <li className={classes.li}>
          <Link className={classes.a} to="/Contact">
            Contact
          </Link>
        </li>
      </div>
  );
};

export default NavBar;

2. 修正Contact组件（路径：src/component/Contact.js） #

import classes from "./Contact.module.css";
// 移除无用的路由相关导入
function Contact() {
  return (
      <footer>
        <div className={classes.contact}>
          <p>Contact Me</p>
        </div>
      </footer>
  );
}

export default Contact;

3. 修正App组件（路径：src/UI/App.js） #

// 修正组件导入路径
import NavBar from "../components/NavBar";
import Contact from "../components/Contact";
import classes from "./App.module.css";
// 从react-router-dom导入所需路由组件
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    {/* 用Router包裹整个应用节点 */}
    <Router>
      <div className={classes.appcontrol}>
        <NavBar />
        {/* v6版本必须用Routes包裹所有Route规则 */}
        <Routes>
          <Route path="/Contact" element={<Contact />} />
          {/* 后续其他页面路由可在此处添加 */}
        </Routes>
      </div>
    </Router>
  );
}

export default App;

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