1

При выполнении команды 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/>
        </>
    );
}
5
  • Установлено ли у вас в package.json свойство homepage?
    – Randall
    10 мая в 8:59
  • Да, homepage: ".", но это как я понимаю влияет только на пути к js и css файлам в билде
    – Daskis
    10 мая в 9:01
  • А ваше приложение размещено в корневом каталоге сервера?
    – Randall
    10 мая в 9:05
  • Не понимаю сути вопроса. На реакте у меня только клиент. Из него посылаются запросы к беку на express. Сервер стоит рабочий. При dev режиме все прекрасно работает. Я хочу настроить билд версию для деплоя на хостинг. Как и говорил ранее, запускаю index.html через плагин из Webstorm (думаю, что-то наподобии json-server).
    – Daskis
    10 мая в 9:10
  • зачем запускать через что-то, если реакт предлагает свой способ запуска сервера?
    – Maneken
    11 мая в 21:07

2 ответа 2

1

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

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

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

 npm install -g serve
 serve -s build
3
  • Я дико извиняюсь, но. Во первых у меня такого нет после билда. Во вторых даже если установить serve у меня службы безопастности на него ругаются. В третьих, как я понимаю, это для запуска клиента на локалке, а мне нужно все таки на хостинг залить. Так что я не понимаю смысла этих действий
    – Daskis
    13 мая в 8:21
  • В вашем вопросе нет ничего про хостинг. Я просто не совсем понял что у вас не так. Я содержимое папки build залил на хостинг и все прекрасно работает. Кстати, если просто запускать index.html, так же получаю белый экран.
    – Maneken
    13 мая в 8:58
  • К сожалению с хостингом та же проблема. Все файлы грузятся нормально, но белый экран все равно
    – Daskis
    13 мая в 10:29
0

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.