Reactjs Router的render props不生效 项目无报错也无内容渲染

你使用的是react-router-dom v6及以上版本，该版本已完全移除<Route>组件的render属性用法，仅支持通过element属性指定要渲染的组件，这就是项目无报错也无渲染内容的核心原因。

修改App.js中<Route>的配置，直接在element属性传入的组件上挂载自定义参数即可，修改后完整代码如下：

import "./App.css";
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
import Auth from "./views/Auth";
function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          {/* 可选配置：根路径自动跳转到登录页 */}
          <Route path="/" element={<Navigate to="/login" replace />} />
          <Route
            path="/login"
            element={<Auth authRoute="login" />}
          />
          <Route
            path="/register"
            element={<Auth authRoute="register" />}
          />
        </Routes>
      </Router>
    </div>
  );
}
export default App;

其余Auth.js、LoginForm、RegisterForm组件不需要做任何修改，重启项目后访问对应路径即可正常渲染内容。如果需要获取路由相关参数（如路径参数、查询参数等），可直接在组件内调用react-router-dom提供的useParams、useSearchParams、useLocation等hooks获取，无需通过props传递。

内容的提问来源于stack exchange，提问作者Lộc Trần Phước