Блог

Главная - Вопросы по программированию - приложение react показывает пустую страницу при перенаправлении при производственной сборке

приложение react показывает пустую страницу при перенаправлении при производственной сборке

#reactjs #nginx #react-router #react-router-dom

#reactjs #nginx #react-маршрутизатор #react-router-dom

Вопрос:

У меня есть приложение ReactJS, которое запущено на сервере, на котором установлен nginx. Проблема в том, что когда я пытаюсь перенаправить с домашней страницы («/») на / UserPanel или / AdminPanel, URL меняется, но отображается пустая страница, но затем, когда я перезагружаю страницу, она работает просто отлично. Эта проблема не возникает на моем локальном хосте, но это происходит с производственной сборкой.

это моя конфигурация nginx:

         listen 80 default_server;
        listen [::]:80 default_server;

       
        root /var/app/html;

        index index.html index.htm;

        location / {
                try_files $uri $uri/ /index.html?$args;
        }

И это мой основной класс приложений:

 import { Route, Router, Switch } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Snackbar />
        <Router history={hist}>
          <MuiThemeProvider theme={theme}>
            <CssBaseline />
            <GlobalStyles />
            <Pace color={theme.palette.secondary.main} />
            <Suspense fallback={<Fragment />}>
              <Switch>
                <PrivateRoute
                  path="/AdminPanel"
                  component={AdminPanel}
                />
                <PrivateRoute
                  path="/UserPanel"
                  component={UserPanel}
                />
                <Route exact path="/" component={HomePage} />
              </Switch>
            </Suspense>
          </MuiThemeProvider>
        </Router>
      </Provider>
    );
  }
}

И я перенаправляю с домашней страницы следующим образом:

 const redirect = () => {
    let url = isAdmin
      ? URLConstant.ADMIN_PANEL
      : isUser
      ? URLConstant.USER_PANEL
      : null;
    if (url) {
      return (
        <Redirect
          push
          to={{
            pathname: url,
            state: {}
          }}
        />
      );
    }
  };

И я использую «react-router»: «^ 5.2.0», «react-router-dom»: «^ 5.2.0», «история»: «последняя».

Что я делаю не так? Должен ли я добавлять что-либо, кроме URL-адресов в .env? Заранее спасибо.

Комментарии:

1. @AjeetShah Я отредактировал вопрос, чтобы предоставить указанную вами информацию. Спасибо

2. @AjeetShah да, я импортировал историю в package.json («история»: «последняя»).

3. @AjeetShah Я использую маршрутизатор из «react-router-dom».

4. Я не знаю о Nginx confit, но я думаю, что это проблема. Вы хотите, чтобы все запросы отправлялись на index.HTML , так что код react выполняется.

5. @AjeetShah Спасибо, чувак!! Это решило проблему. Пожалуйста, оставьте свой комментарий в качестве ответа, чтобы я мог пометить его как правильный ответ.

Ответ №1:

Понизьте версию «истории» или просто удалите ее, потому что правильная версия будет автоматически добавлена «react-router-dom».

Уже существует открытая проблема о том же: https://github.com/ReactTraining/history/issues/804

В котором говорится, что маршрутизатор React (в основном history.push и Redirect ) не работает должным образом с последней (v5) версией истории. Но он отлично работает с v4 истории.

Например, это должно сработать:

     "history": "^4.10.1",
    "react-router-dom": "^5.2.0",

Ответ №2:

Используйте "homepage": ".", внутри вашего package.json .