Я хотела сделать боковое меню, в котором при нажатии на каждую кнопку открывался бы свой компонент. Для этого взяла готовый шаблон https://www.creative-tim.com/product/light-bootstrap-dashboard-react, в отдельном проекте он работает хорошо, но при попытке добавить это в свой проект (реакт 18 версии) возникают ошибки из-за разных версий. В итоге мне удалось убрать все ошибки и осталась одна проблема с роутингом: не могу понять или найти в интернете как это сделать в новой версии реакта. На старой версии переход по компонентам осуществлялся на этой строчке: <Route path="/admin" render={(props) => <AdminLayout {...props} />} />
. Но при запуске проекта на 18 версии при переходе на /admin
просто белый экран. Удалось сделать чтобы /admin
открывалось корректно таким образом: <Route path="/admin" element={<AdminLayout />} />
, но при нажатии на кнопки в боковом меню не происходит открытие компонентов, то есть посредине просто белый экран. При этом отдельно на странице эти компоненты открываются. Вопрос в том, как переписать эту строчку, чтобы компоненты выводились на страницу.
Вот как открывается страница сейчас (красным выделено где должны выводиться компоненты, например dashboard
):
А вот как должно открываться (если запускать отдельно с установленной нужной версией):
Как я думаю проблема в этой одной строке, о которой ранее шла речь. Ниже предоставляю минимальный код.
index.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/>);
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>
</>
);
}
Admin.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;