React Slide Routes触发findDOMNode警告问题求助（搭配MUI）

问题描述 #

切换路由时触发以下警告：

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference

使用React Slide Routes实现路由滑动切换，搭配最新版Material-UI，移除React.StrictMode能屏蔽警告但未解决根源问题，尝试添加nodeRef无效。

相关代码 #

Router.js

<SlideRoutes
    pathList={["/", "/login", "/signup", "/main", "/signAuth", "*"]}
>
  <Route element={<ProfileDrawer />}>
    <Route path="/main" element={<Mainpage />} />
  </Route>
  <Route index path="/" element={<Login />} />
  <Route path="/Login" element={<Login />} />
  <Route
    path="/Signup"
    element={
      <React.Suspense fallback={<LazyLoader />}>
        <Signup />
      </React.Suspense>
    }
  />
  <Route path="/signAuth" element={<Verification />} />
  <Route path="*" element={<NotFound />} />
</SlideRoutes>

index.js

<React.StrictMode>
  <BrowserRouter>
    <StyledEngineProvider injectFirst>
      <Provider store={store}>
        <App />
      </Provider>
    </StyledEngineProvider>
  </BrowserRouter>
</React.StrictMode>

解决方案 #

1. 升级React Slide Routes到兼容版本 #

警告的核心原因是React Slide Routes内部使用了StrictMode已弃用的findDOMNode方法。先尝试升级库到最新稳定版，看是否已修复该兼容问题：

npm update react-slide-routes
# 或用yarn
yarn upgrade react-slide-routes

如果最新版仍未解决，可去库的issue区提交问题，等待维护者修复。

2. 自定义滑动路由组件 #

如果第三方库长期不修复，直接基于React Transition Group自己实现滑动路由，避免依赖兼容问题：

import { useLocation, Routes, Route } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

const CustomSlideRoutes = () => {
  const location = useLocation();
  // 创建ref绑定到路由容器
  const routeRef = React.useRef(null);

  return (
    <TransitionGroup>
      <CSSTransition
        key={location.key}
        timeout={300}
        classNames="slide"
        nodeRef={routeRef}
      >
        <div ref={routeRef}>
          <Routes location={location}>
            <Route element={<ProfileDrawer />}>
              <Route path="/main" element={<Mainpage />} />
            </Route>
            <Route index path="/" element={<Login />} />
            <Route path="/Login" element={<Login />} />
            <Route
              path="/Signup"
              element={
                <React.Suspense fallback={<LazyLoader />}>
                  <Signup />
                </React.Suspense>
              }
            />
            <Route path="/signAuth" element={<Verification />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
      </CSSTransition>
    </TransitionGroup>
  );
};

再添加对应的CSS滑动样式：

.slide-enter {
  transform: translateX(100%);
}
.slide-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-in-out;
}
.slide-exit {
  transform: translateX(0);
}
.slide-exit-active {
  transform: translateX(-100%);
  transition: transform 300ms ease-in-out;
}

3. 临时修改库源码（不推荐） #

如果必须用原库，可临时修改React Slide Routes的源码：找到内部使用Transition组件的地方，给Transition添加nodeRef属性并绑定到对应DOM元素的ref。但这种方法会在库更新后失效，仅作为应急方案。

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