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?

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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