Белый экран при билде React + react-router-dom

Рейтинг: 1Ответов: 2Опубликовано: 10.05.2023

При выполнении команды 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/>
        </>
    );
}

Ответы

▲ 0Принят

Проблема была в том, что я использовал BrowserRouter на статичном сайте, а вместо этого нужно было использовать HashRouter. Пы.сы. Откуда мне было знать, что вообще есть HashRouter, когда во всех обучалках использовали BrowserRouter?

▲ 1

Мужик там же после билда написано, что писать(если через консоль это делать) введите сюда описание изображения

введите сюда описание изображения

я прописал у себя все работает

 npm install -g serve
 serve -s build