How to let React Router render only when navigated to

I have the follow routes in my landing page.

            ...

            <Route exact path='/MainPage' render={(match, history) => {
                return <MainPage></MainPage>
            }}/>

            <Route exact path='/Search' render={(match, history) => {
                return  <SearchPage></SearchPage>
            }}/>

            <Route exact path='/Register' render={(match, history) => {
                return <RegisterPage></RegisterPage>
            }}></Route>

            <Route exact path='/HTTP' render={(match, history) => {
                return <HTTPPage></HTTPPage>
            }}></Route>

            ...

The problem I'm having is that these pages are rendered immediately when the landing page is opened, which means all the css files in these routes are rendered too. For example, in the SearchPage/index.js I have:

import '../style_sheets/mainComponents.css'

When I open the browser inspector on the landing page I see all of these css files are rendered as style tags in the . A lot of these css files have class selectors which adversely modify how things look on the landing page. Is there a way to suppress the rendering of these routes or simply somehow separate the imported css in the children elements from their parent page?