简体   繁体   English

部署reactJS应用程序-生产模式下的路由问题

[英]Deploying reactJS application - routing issues in production mode

I've got some routing issues after deploying in production mode. 在生产模式下部署后,我遇到了一些路由问题。 (My app runs on an aws S3 Bucket) everything works fine only routing has some issues. (我的应用程序在aws S3存储桶上运行),一切正常,只有路由出现问题。

Matching not known Routes are the Problem. 问题是匹配未知路由。 I have the following routing: 我有以下路由:

import {BrowserRouter as Router, hashHistory, Switch, NavLink, Route} from "react-router-dom";

<Provider store={store}>
    <AppContainer>
        <Router history={createHistory}>
            <div>
                <ThemeProvider theme={theme}>
                    <div className={i.content}>
                        {/*Switch is for Error Routing*/}
                        <Switch>
                            <Route exact path="/" component={() => (<Logins foo={"test"} loginHandler={this.props.loginHandler}/>)}/>
                            <Route path="/logout" component={() => (<Logins foo={"test"} loginHandler={this.loginHandler}/>)}/>
                            <Route path="/signup" component={() => (<SignUp loginHandler={this.loginHandler}/>)}/>
                            <Route path="/imprint" component={() => (<Impressum/>)}/>
                            <Route path="/verification/:verificationToken/:verificationEmail" component={() => (<Verification/>)}/>
                            <Route component={() => (<Error/>)}/>
                        </Switch>
                        <div className={i.footer}>
                            <a href="https://johner-institut.de" target="_blank">{t('application:made')} <img src={jilogo} width="8px;"/>
                            </a> | <NavLink to="/imprint">{t('application:imprint')}</NavLink> | <LanguageChooserSmall/>
                        </div>
                    </div>
                </ThemeProvider>
            </div>
        </Router>
    </AppContainer>
</Provider>

Known Routes working fine. 已知路线运行良好。 But in error case the Switch should affect all not known routes should be redirected to <Route component={() => (<Error/>)} /> but that's not working ... 但是在错误的情况下,交换机应该影响所有未知路由,应该将其重定向到<Route component={() => (<Error/>)} />但这不起作用...

what could be the problem? 可能是什么问题呢?

尝试在cloudfront的custom error response设置中将response page path设置为index.html

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我的 AngularJs 应用程序中的路由问题 - Routing issues in my AngularJs application 为什么开发模式下的 ReactJS 包大小小于生产模式? - Why ReactJS bundle size in development mode is smaller than production mode? 在生产模式下获取Ember Application的堆栈跟踪 - Get stacktrace for Ember Application in in production mode Crontab启动节点应用程序永远处于生产模式 - Crontab start node application with forever in production mode Angular / JS Express应用程序在生产模式下处于无限路由循环中,在开发模式下运行良好 - Angular/JS Express app in infinite routing loop in production mode, works fine in development mode 在Heroku问题(Node.js)上部署实时聊天应用程序 - Deploying Live Chat Application on Heroku Issues (Node.js) Vue.js应用程序中生产模式下静态文件的错误路径 - Wrong path to static files in production mode in Vue.js application 如何在生产模式下构建离子应用程序,离子构建的行为有所不同 - How to build an Ionic application in Production mode, Ionic build is behaving differently 生产构建中的开发服务器编译问题和页面路由中断 - Next.js - Development server compile issues and page routing broken in production builds - Next.js 在生产服务器上进行快速路由 - express routing on production server
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM