CODEWITHSUNDEEP
javascriptreactjsamazon-s3react-router-dom
Felix
Felix

Reputation: 5629

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.

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 ...

what could be the problem?

Upvotes: 0

Views: 209

Answers (1)

VF_
VF_

Reputation: 2653

Try setting the response page path to index.html in the custom error response setting in cloudfront.

Upvotes: 1

Related Questions