Im having trouble with react-router-dom working in production. While my app header and footer are rendered just fine, the router does not work and I can see the following ments where my routes should appear upon inspecting the html in Chrome devtools. I am getting no console errors.

<div>
  <!-- react-empty: 15 -->
  <!-- react-empty: 16 -->
  <!-- react-empty: 17 -->
  <!-- react-empty: 18 -->
</div>

This is my App.js ponent file:

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

import styled from 'styled-ponents';

import Header from 'ponents/Header';
import Footer from 'ponents/Footer';

import Home from 'containers/Home';
import Select from 'containers/Select';
import Process from 'containers/Process';
import Privacy from 'containers/Privacy';

const AppWrapper = styled.div`
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    max-width: calc(768px + 16px * 2);
    margin: 0 auto;
    display: flex;
    height: 100%;
    flex-direction: column;
`;

class App extends Component {
    ...

    render() {
        return (
            <Router>
                <AppWrapper>
                    <Header/>
                        <div>
                            <Route exact path='/' render={({history}) => 
                                <Home infoHandler={this.handleUserInfo} 
                                    imageHandler={this.handleImage} 
                                    history={history}/>
                            }/>
                            <Route exact path='/select' render={({history}) =>
                                <Select info={this.state.userInfo} 
                                    image={this.state.userImage}
                                    selectionHandler={this.handleSelectedImage}
                                    history={history}/>
                            }/>
                            <Route exact path='/process' render={({history}) => 
                                <Process image={this.state.selectedImage} user={this.state.userInfo}/>
                            }/>
                            <Route exact path='privacy' ponent={Privacy}/>
                        </div>
                    <Footer/>
                </AppWrapper>
            </Router>
        )
    }
}

export default App;

This is my index.js file:

import React from 'react';
import {render} from 'react-dom';
import App from 'containers/App';

render(<App />, document.getElementById('app'));

The router works like a charm in dev mode. Using Webpack for building.

** Home Component:

import React, {Component} from 'react';

import FacebookLogin from 'ponents/FacebookLogin';
import {Row, Col} from 'react-flexbox-grid';

import styled from 'styled-ponents';
import palette from 'palette';

const Img = styled.img`
    max-width: 100%;
`;

const H3 = styled.h3`
    color: ${palette.black};
`;

class Home extends Component {
    render() {
        return(
            <Row center='xs'>
                <Col xs={12}>
                    <Img src=".png"/>
                </Col>
                <Col xs={12}>
                    <h3> A que Ser Extraordinario te pareces!? </h3>
                </Col>
                <Col xs={12}>
                    <p> Averigualo ahora! </p>
                </Col>
                <Col>
                    <FacebookLogin 
                        infoCallback={this.props.infoHandler}
                        imageCallback={(data) => {
                            this.props.imageHandler(data);
                            this.props.history.push('/select');
                        }}/>
                </Col>
            </Row>
        );
    }
}

Home.propTypes = {
    history: React.PropTypes.object
}

export default Home;

* Update *

App is now working after switching to hash router. Any further ments appreciated since BrowserRouter is the remended approach according to the docs.

Im having trouble with react-router-dom working in production. While my app header and footer are rendered just fine, the router does not work and I can see the following ments where my routes should appear upon inspecting the html in Chrome devtools. I am getting no console errors.

<div>
  <!-- react-empty: 15 -->
  <!-- react-empty: 16 -->
  <!-- react-empty: 17 -->
  <!-- react-empty: 18 -->
</div>

This is my App.js ponent file:

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

import styled from 'styled-ponents';

import Header from 'ponents/Header';
import Footer from 'ponents/Footer';

import Home from 'containers/Home';
import Select from 'containers/Select';
import Process from 'containers/Process';
import Privacy from 'containers/Privacy';

const AppWrapper = styled.div`
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    max-width: calc(768px + 16px * 2);
    margin: 0 auto;
    display: flex;
    height: 100%;
    flex-direction: column;
`;

class App extends Component {
    ...

    render() {
        return (
            <Router>
                <AppWrapper>
                    <Header/>
                        <div>
                            <Route exact path='/' render={({history}) => 
                                <Home infoHandler={this.handleUserInfo} 
                                    imageHandler={this.handleImage} 
                                    history={history}/>
                            }/>
                            <Route exact path='/select' render={({history}) =>
                                <Select info={this.state.userInfo} 
                                    image={this.state.userImage}
                                    selectionHandler={this.handleSelectedImage}
                                    history={history}/>
                            }/>
                            <Route exact path='/process' render={({history}) => 
                                <Process image={this.state.selectedImage} user={this.state.userInfo}/>
                            }/>
                            <Route exact path='privacy' ponent={Privacy}/>
                        </div>
                    <Footer/>
                </AppWrapper>
            </Router>
        )
    }
}

export default App;

This is my index.js file:

import React from 'react';
import {render} from 'react-dom';
import App from 'containers/App';

render(<App />, document.getElementById('app'));

The router works like a charm in dev mode. Using Webpack for building.

** Home Component:

import React, {Component} from 'react';

import FacebookLogin from 'ponents/FacebookLogin';
import {Row, Col} from 'react-flexbox-grid';

import styled from 'styled-ponents';
import palette from 'palette';

const Img = styled.img`
    max-width: 100%;
`;

const H3 = styled.h3`
    color: ${palette.black};
`;

class Home extends Component {
    render() {
        return(
            <Row center='xs'>
                <Col xs={12}>
                    <Img src="https://res.cloudinary./julsgc/image/upload/v1491106020/Boletia_995x380__2_fqawa8.png"/>
                </Col>
                <Col xs={12}>
                    <h3> A que Ser Extraordinario te pareces!? </h3>
                </Col>
                <Col xs={12}>
                    <p> Averigualo ahora! </p>
                </Col>
                <Col>
                    <FacebookLogin 
                        infoCallback={this.props.infoHandler}
                        imageCallback={(data) => {
                            this.props.imageHandler(data);
                            this.props.history.push('/select');
                        }}/>
                </Col>
            </Row>
        );
    }
}

Home.propTypes = {
    history: React.PropTypes.object
}

export default Home;

* Update *

App is now working after switching to hash router. Any further ments appreciated since BrowserRouter is the remended approach according to the docs.

• javascript
• reactjs
• react-router
• react-router-v4
• react-router-dom

• This may help, or it may make things worse. I've looked over your code and it looks fine. Not sure what's going on. Curious, did you ever figure it out? – Tyler McGinnis Commented Apr 12, 2017 at 0:53
• I have not figured it out yet. [This] thread mentions that the ments are React's way of handling a null ponent, if I understood correctly. I added the code to the Home Component that should be rendered, maybe that can shed some light on the error? Many thanks :) – Julio Gudiño Commented Apr 12, 2017 at 14:02
• 1 Ran into same issue, HashRouter works fine, but not BrowserRouter, still looking for solution. – Guruganesh Commented May 15, 2017 at 6:08
• Are you overriding the SCU (shouldComponentUpdate) function in the code you've missed out (...) by any chance? – Herbie Porter Commented Jun 18, 2017 at 22:54
• I found this thread about a month ago, had the same problem, although different setup. The problem seemed to have stemmed off of having multiple versions of react and react-router installed by dependencies. After stabilizing all versions of react / react-dom / react-router / etc., and nuking the node_modules, the problem went away. – JeanLescure Commented Nov 21, 2017 at 12:11

2 Answers 2

use below code in httacces file

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

if your app not in root folder then use

<BrowserRouter basename="/the-app">

**also more review check link https://www.andreasreiterer.at/fix-browserrouter-on-apache/

Please take a look on this Thread

If u are using Webpack, then just add -

devServer{
  historyApiFallback: true
}

And for gulp use the following:

historyApiFallback = require('connect-history-api-fallback')

//start a local dev server
gulp.task('connect', function() {
  connect.server({
    root: ['dist'],
    port: config.port,
    base: config.devBaseUrl,
    livereload: true,
    middleware: [ historyApiFallback() ]
  });
});