빌드에서 반응 라우터 v4가 작동하지 않습니다.

Question

프로덕션 환경에서 작동하는 반응 라우터 DOM에 문제가 있습니다. 내 앱 머리글과 바닥 글은 정상적으로 렌더링되지만 라우터는 작동하지 않으며 Chrome devtools에서 html을 검사 할 때 내 경로가 표시되어야하는 다음 댓글을 볼 수 있습니다. 콘솔 오류가 없습니다.

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

이 내 App.js 구성 요소 파일입니다

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; 

이 내하는 index.js 파일입니다

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

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

라우터는 dev에 모드에서 매력처럼 작동합니다. 건물에 Webpack 사용.

** 홈 구성 요소 :

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; 

* *

앱 지금 라우터를 해시로 전환 한 후 노력 업데이트. BrowserRouter는 문서에 따라 권장되는 접근 방식이므로 이후의 모든 의견을 환영합니다.

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() ] 
    }); 
}); 

Answer 1

것은이 Thread

에 봐 주시기 바랍니다, 그럼 그냥 추가 상황이 악화 될 수 있습니다. 귀하의 코드를 살펴 봤는데 괜찮아 보입니다. 무슨 일이 일어나고 있는지 잘 모르겠다. 호기심, 당신은 그것을 알아 낸 적이 있습니까?