React router displaying component when it shouldn't

Question

Based on my understanding, once you have implemented React Router, your website should not display any components unless the Route path matches the URL. However, my code is not behaving that way. I have things implemented, but the Invoices component is still wanting to render, even though the URL is '/'. How do I fix this problem?

UPDATED to prevent components from rendering and to show more code for LeftMenu

I'm still confused on whether or not I even need to use React Router for my situation.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './pages/App';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
    <Router>
        <App />
    </Router>,
    document.getElementById('root'),
);

App.js

return (
    <>
        <GlobalStyle />
        <TopMenu
            setDisplay={setDisplay}
            display={display}
            openNav={openNav}
            closeNav={closeNav}
        />
        <Wrapper>
            <LeftMenu changeSection={changeSection} setSection={setSection} />
            <MainStyle>
                <BreadCrumbs
                    changeSection={changeSection}
                    number={number}
                    month={month}
                    breadCrumbs={breadCrumbs}
                    setSection={setSection}
                />
                <Portal>
                    {section === 'home' && <Home />}
                    {section === 'invoice' && (
                        <Invoice>
                            <Invoices
                                invoices={invoices}
                                updateNumber={updateNumber}
                                updateMonth={updateMonth}
                                number={number}
                                month={month}
                                download={download}
                            />
                        </Invoice>
                    )}
                    {section === 'act' && <ACT />}
                    {section === 'external' && <External />}
                </Portal>
            </MainStyle>
        </Wrapper>
    </>
);

LeftMenu.js

const LeftMenu = ({ changeSection }) => {
    return (
        <NavWindow>
            <ul>
                <li>
                    <Link to='/Employer Invoices'>Employer Invoices</Link>
                </li>
                <li>
                    <Link to='/ACT'>Enroll Employee</Link>
                </li>
                <li>
                    <Link to='/ACT'>Terminate Employee</Link>
                </li>
                <li>
                    <Link to='/ACT'>Employee Changes</Link>
                </li>
            </ul>
            <Switch>
                <Route exact path='/' component={Home} />
                <Route path='/Employer Invoices' component={Invoices} />
                <Route path='/Employer Invoices/:invoiceId' component={Invoices} />
                <Route path='/Enroll Employee' component={ACT} />
                <Route path='/Terminate Employee' component={ACT} />
                <Route path='/Employee Changes' component={ACT} />
            </Switch>
        </NavWindow>
    );
};

Answer 1

First, there is no link between your LeftMenu component and you App component here. Your leftMenu will never be rendered, and your App will always render all it contains(Home, Invoice, ACT, External...).

Second, the following assertion:

once you have implemented React Router, your website should not display any components unless the Route path matches the URL

is false. In your context, if you change your index.js code from that:

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root'),
);

to that:

ReactDOM.render(
  <Router>
    <LeftMenu />
  </Router>,
  document.getElementById('root'),
);

I guess that it will get close to what you want. It will always render your NavWindow. Links inside will always be rendered, and above the ul tag will be rendered the component whose route match current path.

Here is a fiddle with you code and some modification to make it work, I let you discover the differences. Don't hesitate if you want more explanations.

https://jsfiddle.net/6atxpr15/

Answer 2

You need to wrap App in a Route component (https://reacttraining.com/react-router/web/api/Route) :

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

ReactDOM.render(
    <Router>
        <Route path='/' component={App} />
    </Router>
    document.getElementById('root'),
);