在生产构建上重定向时反应应用程序显示空页面

2024-02-03

我有一个reactJs应用程序,它在有nginx的服务器上运行。 问题是,当我尝试从主页(“/”)重定向到 /UserPanel 或 /AdminPanel 时 网址发生了变化,但它显示了一个空页面,但是当我重新加载页面时,它工作得很好。 这个问题不会发生在我的本地主机中,但会发生在生产构建中。

这是我的 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”,“history”:“最新”。

我究竟做错了什么?我应该在 .env 中添加除 url 之外的其他内容吗? 提前致谢。


降级您的“历史”版本或直接将其删除,因为“react-router-dom”将自动添加正确的版本。

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

其中说React Router(主要是history.push and Redirect)无法与最新(v5)版本正常工作history。但它与历史 v4 完美配合。

例如,这应该有效:

    "history": "^4.10.1",
    "react-router-dom": "^5.2.0",
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在生产构建上重定向时反应应用程序显示空页面 的相关文章

随机推荐