React路由问题：指定路径下组件无法正常显示

一、路由组件setPath的错误及修复 #

你的setPath组件存在3处语法/逻辑错误，直接导致路由无法匹配：

1. 函数定义缺少括号，正确写法需添加()
2. 未导入MobileCardsGuest组件，路由无法识别目标组件
3. Routes标签闭合错误，需用</Routes>而非<Routes/>

修复后的代码：

import { Routes, Route } from "react-router-dom";
import MobileCardsGuest from "./path/to/MobileCardsGuest"; // 替换为实际组件路径

function setPath() {
  return (
    <Routes>
      <Route path="/sect/guest" element={<MobileCardsGuest />} />
    </Routes>
  );
}

export default setPath;

二、Navbar组件的错误及修复 #

导航组件存在4处关键错误，导致跳转逻辑失效：

1. useNavigate导入方式错误，需用大括号包裹
2. useNavigate必须在组件函数内部调用，不能放在外部
3. 函数定义缺少括号
4. button标签语法错误，onClick回调未闭合，标签未正确结束

修复后的代码：

import { useNavigate } from "react-router-dom";

function Navbar() {
  const navigate = useNavigate();
  
  return (
    <button onClick={() => navigate("/sect/guest")}>
      Guest
    </button>
  );
}

export default Navbar;

三、MobileCardsGuest组件的潜在问题 #

组件内存在未闭合的Link标签（第二个card里只有</Link>没有对应的起始标签），会导致DOM结构异常，可能间接影响组件渲染，需修正：

// 原错误片段
<div class="card bg-light m-card">
  <p></p>
    <img src={accIcon} className="iconimg" alt="Acc Icon" />
    <div class="card-body text-center">
      <p class="card-text">Accomodation</p>
    </div>
  </Link>
</div>

// 修复后（若需Link包裹则补全起始标签，不需要则删除</Link>）
<Link to="/your-target-path">
  <div class="card bg-light m-card">
    <p></p>
      <img src={accIcon} className="iconimg" alt="Acc Icon" />
      <div class="card-body text-center">
        <p class="card-text">Accomodation</p>
      </div>
  </div>
</Link>

额外验证步骤 #

确保App.js中正确包裹了BrowserRouter（react-router-dom v6要求所有路由相关组件必须在BrowserRouter内）：

import { BrowserRouter } from "react-router-dom";
import setPath from "./path/to/setPath";

function App() {
  return (
    <BrowserRouter>
      <setPath />
    </BrowserRouter>
  );
}

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