Is it possible to create a function that searches the content of an entire react website?

I created a website for my company using React and one of the requirements is a search bar.

I’m using react-router-dom to render the different pages within a component in App.js like so:

import Landing from './newSrc2/pages/landing/landing';

// new pages for redesign
const Snow = lazy(() => import('./newSrc2/pages/snow'));
const PageNotFound = lazy(() => import('./newSrc2/pages/404'));
// REST OF MY IMPORTS

return (
    <Switch>
        <Route
            exact
            path="/landing"
            component={Landing}
        />

        <Route
            exact
            path="/snow"
            component={Snow}
        />

        // REST OF MY ROUTES

        <Route component={PageNotFound} />
    </Switch>
)

At the top of each page is a <Navbar /> component with a search bar in it. In the navbar search function, I would like to search the content of all of the pages and find the pages that contain the search term input by the user.

One way that seems to work is importing all of the pages into Navbar, converting each to a string and searching each string for the search term. My issue with this is that there are A LOT of pages in the website, so this seems a bit redundant and I’m worried about performance / scalability. There must be an easier way.

Do you have any suggestions?