React中使用RouterLink跳转组件及RouterLink不生效问题排查求助

问题根因定位 #

• 跳转路径与路由定义不匹配：RouterLink的to属性值为../Profile/profile，但路由配置的path为/profile，路径完全不匹配导致无法命中路由规则
• 路由规则未实际挂载：你在CustomRoutes.js中定义的路由数组没有在项目入口的渲染逻辑中引入注册，相当于写了规则但没有启用，跳转后自然找不到对应组件
• 组件命名不规范：React要求自定义组件首字母必须大写，你的Profile组件定义为function profile()，小写开头会被识别为原生HTML标签，无法正常渲染
• API版本不兼容：当前主流React Router v6已经废弃了v5的component、exact属性，旧写法直接使用会失效
• 点击事件拦截：如果handleListItemClick方法中调用了event.preventDefault()，会拦截Link的默认跳转行为

代码修正方案 #

1. 修正导航栏代码 #

<Transitions in={open} {...TransitionProps}>
   <MainCard>
     <CardContent>
        <List component="nav" className={classes.navContainer}>
            <ListItem className={classes.listItem}
             sx={{ borderRadius: theme.palette.borderRadius + "px", }}
             selected={selectedIndex === 0}
             // 无特殊业务逻辑可删除onClick，避免拦截跳转
             component={React.forwardRef((props, ref) => (
             <RouterLink {...props} to="/profile"/>
              ))} >
                 <ListItemIcon>
                     <IconSettings stroke={1.5} size="1.3rem" />
                  </ListItemIcon>
                  <ListItemText
                     primary={<Typography variant="body2">Account Settings</Typography> }/>
                  </ListItem>
     </CardContent>
   </MainCard>
</Transitions>

2. 修正Profile.js组件 #

import React from "react";
import "./profile.css";
// 组件名首字母大写
function Profile() {
  return (
     <card>
       {/* React中class属性要写为className */}
       <div className="main-content">
         <p>Profile</p>
       </div>
     </card>
)};
export default Profile;

3. 修正CustomRoutes.js（适配React Router v6主流版本） #

import React from "react";
import { Routes, Route } from "react-router-dom";
import Profile from "./component/layout/MainLayout/Header/Profile/profile";

export default function CustomRoutes() {
  return (
    <Routes>
      <Route path="/profile" element={<Profile />} />
      {/* 其余路由规则统一在这里添加 */}
    </Routes>
  )
}

4. 修正App.js，挂载路由容器 #

import { BrowserRouter } from "react-router-dom";
import CustomRoutes from "./CustomRoutes";
import customLayout from "./component/layout/customLayout/customLayout";
import AdminBuilder from "./AdminBuilder";
import React, { Component, createContext } from "react";

class App extends Component {
render() {
return (
  <BrowserRouter>
    <AdminBuilder>
      {/* 将路由组件放在AdminBuilder的内容展示出口位置即可 */}
      <CustomRoutes />
    </AdminBuilder>
  </BrowserRouter>
 );
}

Router与Link的核心区别 #

• Router 是路由的核心容器组件，常用的有BrowserRouter、HashRouter两种，作用是监听浏览器URL变化、管理全局路由状态，所有路由规则和Link组件必须放在Router内部才能正常工作
• Link 是路由跳转专用组件，作用是替代原生a标签，实现无刷新修改浏览器URL，同时通知Router匹配对应路由规则渲染组件，不会触发整页重载，性能远优于原生a标签跳转

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