我有一个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(使用前将#替换为@)