title: React-Router-Dom Master Page
body: <p>I am trying to create a master page using <code>react-router-dom</code>. My <code>main</code> page will have a <code>nav-bar</code> and I only want the content to change. So in my site Router page I have something like this:</p>
  
  <pre><code>import React from 'react'
  
  import { BrowserRouter, Switch, Route } from 'react-router-dom'
  
  import {FundDetails} from "../pages/fund_detail";
  import {Dashboard} from "../pages/dashboard";
  import {Main} from "../pages/main";
  
  
  export class SiteRouter extends React.Component {
    render(){
      return (
          &lt;BrowserRouter&gt;
            &lt;Switch&gt;
              &lt;Route component={Main}/&gt;
              &lt;Route path="/fund_details"          component={FundDetails}      /&gt;
              &lt;Route path="/dashboard"          component={Dashboard}      /&gt;
            &lt;/Switch&gt;
          &lt;/BrowserRouter&gt;
      );
    }
  }
  </code></pre>
  
  <p>Then in my <code>navbar.js</code> I have the links:</p>
  
  <pre><code>import React from 'react';
  
  import { NavItem, Nav, Navbar } from 'react-bootstrap';
  
  import styled from 'styled-components';
  
  import Particles from 'react-particles-js';
  import params from './../../components/particlesjs-config.json';
  import {PurposeLogo} from "../media/PurposeLogo";
  
  
  import {
    BrowserRouter as Router,
    Route,
    Link
  } from 'react-router-dom'
  
  const StyledNavbar = styled(Navbar)`
  
    background-image: linear-gradient(90deg, #320734 0%, #B71F71 100%);
    min-height: 100px;
  }
  `
  
  
  export class PurposeNav extends React.Component {
    render(){
      return(
          &lt;StyledNavbar inverse collapseOnSelect fixedTop&gt;
            &lt;Particles
                height={100}
                params={params}
                style={{
                  position: "fixed",
                  top: 0,
                  marginLeft: 700,
                  width: "100%",
                  height: "100%"
                }} /&gt;
            &lt;Navbar.Header&gt;
              &lt;Navbar.Brand&gt;
                &lt;PurposeLogo /&gt;
              &lt;/Navbar.Brand&gt;
            &lt;/Navbar.Header&gt;
            &lt;Navbar.Collapse&gt;
              &lt;Nav pullRight&gt;
                &lt;NavItem&gt;&lt;Link to='fund_details'&gt;Fund Details&lt;/Link&gt;&lt;/NavItem&gt;
                &lt;NavItem eventKey={2} href="#"&gt;Link Right&lt;/NavItem&gt;
              &lt;/Nav&gt;
            &lt;/Navbar.Collapse&gt;
          &lt;/StyledNavbar&gt;
      );
    }
  }
  </code></pre>
  
  <p>So when I click on <code>Fund Details</code>, a graph is supposed to display. But I get nothing. Any ideas?</p>