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

时间:2017-08-11 07:53:22

标签: javascript reactjs amazon-s3 react-router-dom

在生产模式下部署后,我遇到了一些路由问题。 (我的应用程序运行在一个aws S3 Bucket上)一切正常,只有路由有一些问题。

匹配未知路由是问题所在。我有以下路由:

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>

已知路线工作正常。但是在错误的情况下,Switch应该影响所有未知的路由应该被重定向到<Route component={() => (<Error/>)} />但是这不起作用......

可能是什么问题?

1 个答案:

答案 0 :(得分:1)

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