在生产版本上重定向时反应应用程序显示空页面 [英] react app showing empty page when redirecting on production build

问题描述

我有一个 reactJs 应用程序，它运行在装有 nginx 的服务器上.问题是当我尝试从 HomePage("/") 重定向到/UserPanel 或/AdminPanelurl 更改但它显示一个空页面，但是当我重新加载页面时，它工作得很好.这个问题不会发生在我的本地主机上，但会发生在生产版本中.

I have a reactJs app which is running on a server that has nginx on it. The problem is that when I try to redirect from HomePage("/") to /UserPanel or /AdminPanel the url changes but it shows an empty page, but then when i reload the page, it works just fine. This problem doesn't occur in my localhost, but it happens to the production build.

这是我的 nginx 配置:

this is my nginx config:

        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>
    );
  }
}

我是从主页这样重定向的:

And I am redirecting from HomePage like this:

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"、history":latest".

And I'm using "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "history": "latest".

我做错了什么?我应该在 .env 中添加除 url 之外的任何内容吗?提前致谢.

What am I doing wrong? Should I add anything other than urls in .env? Thanks in advance.

推荐答案

降级您的历史"版本或简单地删除它，因为react-router-dom"会自动添加正确的版本.

Downgrade your "history" version or simply remove it because the correct version will be automatically added by "react-router-dom".

已经有一个关于相同的未决问题:https://github.com/ReactTraining/history/issues/804

There is already an open issue about the same: https://github.com/ReactTraining/history/issues/804

其中表示 React 路由器(主要是 history.push 和 Redirect)与 history 的最新 (v5) 版本无法正常工作.但它与 v4 of history 完美配合.

Which says React Router (mainly history.push and Redirect) is not working properly with latest (v5) version of history. But it is working perfectly with v4 of history.

例如，这应该有效:

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

这篇关于在生产版本上重定向时反应应用程序显示空页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！