При выполнении команды npm run build
создается html, при запуске которого вместо контента обычный белый экран (через плагин webstorm запускаю, не просто тыкнув на файл), div id='root'
пустой. Ошибок в консоли нет. Гуглил, говорят ошибка из-за basename
в BrowserRouter
, но при правильном варианте все равно не работает. (С путями к файлам все в порядке). Стек React + React-router-dom v6.
В dev режиме все работает.
UPDATE: css и js файлы грузятся нормально, но все равно белый экран
index.js
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter basename="/">
<App />
</BrowserRouter>
);
App.js
import './App.module.css';
import {BrowserRouter, Route, Routes} from "react-router-dom";
import MainPage from "./pages/MainPage/MainPage";
import AuthPage from "./pages/AuthPage/AuthPage";
import Layout from "./pages/Layout";
import EditPage from "./pages/EditPage/EditPage";
import NewPage from "./pages/NewPage/NewPage";
function App() {
return (
<Routes>
<Route element={<Layout/>}>
<Route path={"/"} element={<MainPage/>}/>
<Route path={"/edit/:id"} element={<EditPage/>}/>
<Route path={"/new"} element={<NewPage/>}/>
<Route path={"/auth"} element={<AuthPage/>}/>
</Route>
</Routes>
);
}
export default App;
Layout.js
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import AccountCircle from '@mui/icons-material/AccountCircle';
import styles from "./Layout.module.css"
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';
import {Link, Outlet} from "react-router-dom";
import {useState} from "react";
import {Button} from "@mui/material";
import {lightBlue} from "@mui/material/colors";
import Cookies from "js-cookie"
export default function Layout() {
const [auth, setAuth] = useState(Cookies.get("auth"));
const [anchorEl, setAnchorEl] = useState(null);
const logOut = () => {
Cookies.remove("auth")
window.location.reload()
}
const handleMenu = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
<Box sx={{flexGrow: 1}}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="div" sx={{flexGrow: 1}}>
<Link className={styles.link} to={"/"}>Главная</Link>
</Typography>
{auth
?
<Box sx={{
display: "flex",
gap: 2
}}>
<Link to={"/new"}>
<Button color={"secondary"} variant={"contained"}>Создать новую запить</Button>
</Link>
<Button onClick={logOut} color={"error"} variant="contained">Выйти</Button>
</Box>
:
<Button color={"success"} variant="contained">
<Link className={styles.link} to={"/auth"}>Войти</Link>
</Button>
}
</Toolbar>
</AppBar>
</Box>
<Outlet/>
</>
);
}
package.json
свойство homepage?homepage: "."
, но это как я понимаю влияет только на пути к js и css файлам в билдеindex.html
через плагин из Webstorm (думаю, что-то наподобии json-server).