React-Router V6路由点击报错TypeError: n is not a function，刷新正常

问题现象 #

使用React-Router V6开发项目时，点击任意<Link>路由链接页面无法渲染，抛出TypeError: n is not a function错误（来自react-dom.production.min.js）；但用原生<a href="/">跳转页面正常，同时需要后续实现路由传递组件props的功能。

核心问题排查与解决 #

1. 移除Route的exact属性（最可能的报错原因） #

React-Router V6已完全移除exact属性，因为V6的路由匹配规则默认就是精确匹配，手动添加exact会导致路由内部逻辑异常，触发上述函数错误。

修改App.js中的路由配置，删除所有<Route>上的exact属性：

function App() {
return (
    <BrowserRouter>
        <div className="Orchard Inbound Orders">
            <Navbar />
            <div className="container">
                <Routes>
                    <Route path="/" element={<UploadOrdersPageHome />} />
                    <Route path="/admin-users" element={<AdminPageUsersTab />} />
                    <Route path="/admin-clients" element={<AdminPageClientsTab />} />
                    <Route path="/create-client" element={<CreateClientPage />} />
                    <Route path="/edit-client/:rowkey" element={<EditClientPage />} />
                </Routes>
            </div>
        </div>
    </BrowserRouter>
);
}

2. 确认<Link>组件的导入正确性 #

确保Navbar.js中的<Link>是从react-router-dom正确导入的，不要误导入其他UI库的Link组件：

// 在Navbar.js顶部添加正确导入
import { Link } from 'react-router-dom';

后续实现路由传递组件props的方案 #

方式一：通过路由state传递数据 #

跳转时通过state携带参数：

// Navbar或其他组件中跳转
<Link to="/admin-clients" state={{ name: 'test', id: 123 }}>Admin</Link>

目标组件中通过useLocation获取state：

import { useLocation } from 'react-router-dom';

function AdminPageClientsTab() {
  const location = useLocation();
  const { name, id } = location.state || {};
  
  return <div>{name}</div>;
}

方式二：通过URL参数传递（如动态路由） #

对于/edit-client/:rowkey这类动态路由，目标组件用useParams获取参数：

import { useParams } from 'react-router-dom';

function EditClientPage() {
  const { rowkey } = useParams();
  
  return <div>编辑客户ID：{rowkey}</div>;
}

方式三：使用React Context全局传递 #

如果需要跨多个路由组件共享props，可以创建React Context：

// 创建Context文件
import { createContext, useContext } from 'react';

const AppContext = createContext();

export function AppProvider({ children, value }) {
  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

export function useAppContext() {
  return useContext(AppContext);
}

在App.js中包裹路由：

import { AppProvider } from './AppContext';

function App() {
  const sharedProps = { user: 'admin', permissions: ['edit'] };
  
  return (
    <BrowserRouter>
      <AppProvider value={sharedProps}>
        <div className="Orchard Inbound Orders">
          <Navbar />
          <div className="container">
            <Routes>
              {/* 路由配置 */}
            </Routes>
          </div>
        </div>
      </AppProvider>
    </BrowserRouter>
  );
}

目标组件中使用：

import { useAppContext } from './AppContext';

function AdminPageUsersTab() {
  const { user } = useAppContext();
  
  return <div>当前用户：{user}</div>;
}

内容的提问来源于stack exchange，提问作者Holden the Hitcher