ビルドで反応ルータ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以来のコメントは、ドキュメントに従って推奨されるアプローチです。

Answer 1

uはWebPACKのを使用している場合は、単に追加し、このThread

に見てみてください -

devServer{ 
    historyApiFallback: true 
} 

をそしてgulpために、次を使用します。これは役立つかもしれ

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