我有一个 reactJs 应用程序,它运行在装有 nginx 的服务器上。问题是,当我尝试从 HomePage("/") 重定向到 /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", "history": "latest"。
我究竟做错了什么?我应该在 .env 中添加除 url 之外的任何内容吗?提前致谢。