生成构建中不反映的反应路径组件

Question

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Header from './components/header';
import Body from './components/body';
import Archive from './components/archive';
import Settings from './components/settings';

import './assets/css/style.css';

const wrapper = <Router>
      <div>
        <Header/>
        <Route exact path="/" component={Body}/>
        <Route path="/archive" component={Archive}/>
        <Route path="/label/work" component={Settings}/>
        <Route path="/settings" component={Settings}/>
      </div>
</Router>;

render(wrapper, document.getElementById('app'));

在上面的代码中，Body组件以开发模式呈现。 但是当我在生产中运行相同的代码时，构建体组件不会被渲染。

输出：

开发模式：呈现身体组件

生产构建：未呈现的主体组件

Answer 1

请看这个例子in documentation

尝试用无状态组件替换包装器：

const wrapper = () => (
  <Router>
      <div>
        <Header/>
        <Route exact path="/" component={Body}/>
        <Route path="/archive" component={Archive}/>
        <Route path="/label/work" component={Settings}/>
        <Route path="/settings" component={Settings}/>
      </div>
  </Router>
);