Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React router v4 not working on build

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 comments 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 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 for building.

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

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

like image 689
Julio Gudiño Avatar asked Apr 11 '17 16:04

Julio Gudiño


1 Answers

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/

like image 163
Ajay chaudhary Avatar answered Oct 22 '22 11:10

Ajay chaudhary