我想制作一个侧面菜单，其中每个按钮在单击时都会打开自己的组件。为此，我使用了一个现成的模板https://www.creative-tim.com/product/light-bootstrap-dashboard-react，在一个单独的项目中效果很好，但是当我尝试将其添加到我的项目（反应版本 18），错误发生在 - 对于不同的版本。结果，我设法消除了所有错误，只有一个路由问题：我无法理解或在 Internet 上找不到如何在新版本的 React 中执行此操作。在旧版本中，通过组件的转换是在这一行中执行的：<Route path="/admin" render={(props) => <AdminLayout {...props} />} />。但是当你在版本 18 上启动项目时，当你切换到/admin只是一个白屏时。我设法/admin以这种方式正确打开它：<Route path="/admin" element={<AdminLayout />} />, 但是当你点击侧面菜单中的按钮时，组件不会打开，也就是说，中间只有一个白屏。同时，这些组件在页面上分别打开。问题是如何重写这一行，使组件显示在页面上。
这是页面现在打开的方式（红色突出显示组件应显示的位置，例如dashboard）：
它应该如何打开（如果您在安装所需版本的情况下单独运行它）：
我认为问题出在前面讨论过的这一行中。下面是最小的代码。
索引.js：
import React from "react";
import { createRoot } from 'react-dom/client';
import App from "./App";
import Modal from "react-modal";
Modal.setAppElement("#root");
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App/>);
应用程序.js：
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
...
import AdminLayout from "layouts/Admin.js";
export default function App() {
return (
<>
<Router>
<Routes>
<Route path="/admin" element={<AdminLayout />} />
{/* Рабочий вариант на старой версии */}
{/* <Route path="/admin" render={(props) => <AdminLayout {...props} />} /> */}
</Routes>
</Router>
</>
);
}
管理员.js：
import React, { Component } from "react";
import { useLocation, Route, Routes } from "react-router-dom";
import AdminNavbar from "components/Navbars/AdminNavbar";
import Footer from "components/Footer/Footer";
import Sidebar from "components/Sidebar/Sidebar";
import FixedPlugin from "components/FixedPlugin/FixedPlugin.js";
import routes from "routes.js";
import sidebarImage from "assets/img/sidebar-3.jpg";
function Admin() {
const [image, setImage] = React.useState(sidebarImage);
const [color, setColor] = React.useState("black");
const [hasImage, setHasImage] = React.useState(true);
const location = useLocation();
const mainPanel = React.useRef(null);
const getRoutes = (routes) => {
return routes.map((prop, key) => {
if (prop.layout === "/admin") {
return (
<Route
path={prop.layout + prop.path}
render={(props) => <prop.component {...props} />}
key={key}
/>
);
} else {
return null;
}
});
};
React.useEffect(() => {
document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0;
mainPanel.current.scrollTop = 0;
if (
window.innerWidth < 993 &&
document.documentElement.className.indexOf("nav-open") !== -1
) {
document.documentElement.classList.toggle("nav-open");
var element = document.getElementById("bodyClick");
element.parentNode.removeChild(element);
}
}, [location]);
return (
<>
<div className="wrapper">
<Sidebar color={color} image={hasImage ? image : ""} routes={routes} />
<div className="main-panel" ref={mainPanel}>
<AdminNavbar />
<div className="content">
<Routes>{getRoutes(routes)}</Routes>
</div>
<Footer />
</div>
</div>
<FixedPlugin
hasImage={hasImage}
setHasImage={() => setHasImage(!hasImage)}
color={color}
setColor={(color) => setColor(color)}
image={image}
setImage={(image) => setImage(image)}
/>
</>
);
}
export default Admin;
