React-Router-Dom Master Page

Question

I am trying to create a master page using react-router-dom. My main page will have a nav-bar and I only want the content to change. So in my site Router page I have something like this:

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 (
        <BrowserRouter>
          <Switch>
            <Route component={Main}/>
            <Route path="/fund_details"          component={FundDetails}      />
            <Route path="/dashboard"          component={Dashboard}      />
          </Switch>
        </BrowserRouter>
    );
  }
}

Then in my navbar.js I have the links:

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(
        <StyledNavbar inverse collapseOnSelect fixedTop>
          <Particles
              height={100}
              params={params}
              style={{
                position: "fixed",
                top: 0,
                marginLeft: 700,
                width: "100%",
                height: "100%"
              }} />
          <Navbar.Header>
            <Navbar.Brand>
              <PurposeLogo />
            </Navbar.Brand>
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              <NavItem><Link to='fund_details'>Fund Details</Link></NavItem>
              <NavItem eventKey={2} href="#">Link Right</NavItem>
            </Nav>
          </Navbar.Collapse>
        </StyledNavbar>
    );
  }
}

So when I click on Fund Details, a graph is supposed to display. But I get nothing. Any ideas?

Answer 1

<Switch> will "break" from matching as soon as it finds a matching <Route>. Routes without a path will always match so nothing under it will. If you want Main to always render it doesn't need to be wrapped in a Route at all.

  <BrowserRouter>
    <div>
      <Main />
      <Switch>
        <Route path="/fund_details" component={FundDetails} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </div>
  </BrowserRouter>