React路由器v4无法正常工作

Question

Im在生产环境中运行react-router-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')); 

的路由器工作就像在开发模式的魅力。使用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

如果妳使用的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() ] 
    }); 
});