I have browsed almost every resource on the internet and have not found a solution so please don't recommend me someone else's question that is identical because I have most likely already tried it.
Here is my container that has all of the routes. These reside in the App component which is basically the uppermost component.
Here is my provider. Basically, I have a title and when you click on the different links that take you to different views (i.e., Home, Client, Company) I do something like...
const { setHeader } = useContext(HeaderContext);
useEffect(() => {
setHeader("Company Dashboard");
document.title = "Company Dashboard"
})
As you can see the "setHeader("Company Dashboard")" should set the header. The header is actually a separate component that rerenders if the HeaderContext updates.
The Provider works btw. This is because the Header component has uses this context to set the element. So if I change the empty string to "oeijsofiej" it will display "oeijsofiej" as the title BUT it does NOT change when you click on different tabs.
I have tried to surround all of the components in a but unfortunately, that does absolutely nothing. No errors thrown and the setContext doesn't do anything. I have tried other ways of formatting the element like
<Route path="/" exact render={() => <HeaderContextProvider><Home></HeaderCOntextProvider>}/>
Unfortunately, this also does nothing. I've tried other methods and get weird errors. Not sure what I'm doing wrong I've exhausted all of my resources. Please help.
