React will not pull data from Firebase after clicking Navbar via React-Router tag

I am creating a React app that pulls data from a Firebase object. The initial rendering on home page works fine, I get an object with data I need (Object contains data in initial rendering). However, when I navigate to a different component, and try to click the navbar-brand icon (Bootstrap 4 Navbar)back to home page via tag on React-Router, the data will no longer load. (Object is empty) Data will only re-appear if I refresh the page manually. I am using Gulp and Browserify to serve the page locally as well as bundling files.

main.jsx (my home page component)

var React = require("react");
var ReactFire = require("reactfire");
var Firebase = require("firebase");
var rootUrl = "http://ift.tt/2aor0Wm";
var Link = Router.Link;
var Navbar = require("./navbar");
var presentations = [];

module.exports = React.createClass({
    mixins: [ ReactFire ],
    getInitialState: function(){
      return {
          presentations: []
      }
    },
    componentDidMount: function(){
        console.log("componentdidmount");
        this.fb = new Firebase(rootUrl + 'presentations/');
        this.bindAsArray(new Firebase(rootUrl + 'presentations/'), 'presentations');
        this.fb.on('value', this.handleDataLoaded);
    },
    handleDataLoaded: function() {
        this.setState({presentations: this.state.presentations})
    },
render: function() {
  var data = this.state.presentations || [];
  return (
    <div className="wrapper">
      <Navbar />
      <div className="container">
        <div className="row">
          <div className="card-group col-sm-12">
            {data.map(function(slide){
                return (
                    <div key={slide.id}>
                      <div className="card col-xs-12 col-md-6 col-lg-4">
                          <Link to={"/slidedetail/" + slide.id} >
                            <img className="card-image" src={slide.thumbnail} />
                          </Link>
                        <div className="card-caption">
                          <h6>{slide.title}</h6>
                          <p className="card-conference">{slide.conference}</p>
                          <p className="card-author">by {slide.presenters}</p>
                          <p className="card-date">on {presentationDate}</p>
                        </div>
                      </div>
                    </div>
                );
              })}
          </div>
        </div>
      </div>
    </div>
  );
}
});

navbar.jsx (navbar component)

var React = require("react");
var Router = require("react-router");
var Link = Router.Link;
var ReactFire = require("reactfire");
var Firebase = require("firebase");

module.exports = React.createClass({
  render: function(){
    return(
      <div className="row">
          <div className="navbar-container col-xs-12 col-sm-12">
            <nav className="navbar navbar-light bg-faded col-xs-12 col-sm-12">
              <Link to={"/"} >
                <a className="navbar-brand p-a-2 col-md-5 col-sm-12 hidden-sm-down"><img src="../img/nm-logo.png" /></a>
              </Link>
            </nav>
        </div>
      </div>
    )
  }
});

Routes.jsx (Routing)

var React = require("react");
var ReactRouter = require("react-router");
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Main = require("./components/main");
var Slidedetail = require("./components/slidedetail");
var Upload = require("./components/upload");

module.exports = (
  <Router>
    <Route path="/" component={Main} />
    <Route path="/slidedetail/:id" component={Slidedetail} />
    <Route path="/upload" component={Upload} />
  </Router>
);