React router v4 not working on build
I'm having trouble getting a working router to work. Although my application header and footer are showing just fine, the router is not working and I can see the following comments where my routes should appear when checking the html in Chrome devtools. I am not getting any console errors.
<div>
<!-- react-empty: 15 -->
<!-- react-empty: 16 -->
<!-- react-empty: 17 -->
<!-- react-empty: 18 -->
</div>
This is my App.js component file:
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import styled from 'styled-components';
import Header from 'components/Header';
import Footer from 'components/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' component={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 to Build.
** Home component:
import React, {Component} from 'react';
import FacebookLogin from 'components/FacebookLogin';
import {Row, Col} from 'react-flexbox-grid';
import styled from 'styled-components';
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.com/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 *
The app now works after switching to the hash router. Any additional comments are appreciated as BrowserRouter is the recommended approach as per the docs.
source to share
use the below code in your httacces Options -MultiViews RewriteEngine On RewriteCond% {REQUEST_FILENAME}! -f RewriteRule ^ index.html [QSA, L]
if your app is not in root folder use
** also more overview check below link https://www.andreasreiterer.at/fix-browserrouter-on-apache/
source to share
Please take a look at Thread
If u is 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() ]
});
});
source to share