How to add “`Context“` with routes set up?

I want to add the searchContext context in my App.js so that my Navbar an Results components have access to the variables in it. How would I do this with my routes set up? I tried to just add with with them but that didn’t work. This is the code.

<Router>
        // Where does <searchContext.Provider> go?
        <Navbar></Navbar>
        <Routes>
            <Route exact path='/' element={<Home />} />
            <Route path='/results'>
              <Route path='/results/:value' element={<Results />} />            
              {/*<Route path='/results/:value/:slot' element={<Slot />}*/}
            </Route>
            // Another route that has nothing to do with searchContext
         </Routes>
    </Router>

Edit: Added “// Another route that has nothing to do with searchContext”

Answer

if i were you i would just wrap the all thing with the provider as long as its not to heavy.

Advertisement

Answer