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"
if i were you i would just wrap the all thing with the provider as long as its not to heavy.
Hellow, this goes with general understanding of context Api, now the structure of your folders is your choice but i'll be very brief here
//on your context file searchContext.js
import {useState,createContext} from 'react';
export const SearchContext = createContext(null);
export const ContextProvider = props => {
const [search,setSearch] = useState(null);
return <SearchContext.Provider value = {{search,setSearch}}>
{children>
</SearchContext.Provider>
}
//now on your route.js
import { ContextProvider} from '../your/path/file';
....
<Router>
// Where does <searchContext.Provider> go?
<ContextProvider>
<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>
</ContextProvider>
</Router>