内容下面的React Component

Question

我正在使用react.js并对路由器进行反应以呈现某条路线上的组件。在开发过程中，我的所有组件都会显示出来，但是在heroku的生产中，尽管添加了z-index属性，但我的组件会相互渲染。例如，导航栏和主页是一个组件。这是正在开发的项目图片。一切都显现出来了。导航栏的z-index最重要。

现在，当我将此项目推向生产时，导航栏呈现在主组件下方。

我希望这个问题很明确，但我不确定为什么组件会在下面呈现。

这是我的app.js

import React, { Component } from 'react';

import Nav from './nav'
import Home from './Home'
import About from './About'
import Gallery from './Gallery'
import Resume from './Resume'
import {Route, Router, BrowserRouter, withRouter } from 'react-router-dom'




export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
          <div>
            <Nav/>
            <Route exact path='/' component={Home}/>
            <Route exact path='/about' component={About}/>
            <Route exact path='/gallery' component={Gallery}/>
            <Route exact path='/resume' component={Resume}/>
          </div>
      </BrowserRouter>
    );
  }
}