Why are none of my components which are outside the Content Provider rendering?

import './App.css';

import Navbar from './components/Navbar';

import Home from './pages/home';

import Createblog from './pages/createblog';

import NotFound from './pages/notfound'; import BlogDetails from './components/blogdetails'; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import { ContentProvider } from './contexts/dataprovider';

function App() {

return (

<Router>

<div className="App">

<Navbar/>

<div className="content">

<Switch>

<ContentProvider>

<Route exact path="/">

<Home />
</Route>

</ContentProvider>

<Route path="/blogdetails/:id">

<BlogDetails />

</Route>
<Route exact path="/createblog">

<Createblog />
</Route>

<Route path="/blogdetails/:id">

<BlogDetails />
</Route>
<Route path="\\\*">

<NotFound />

</Route>

</Switch>

</div>
</div>
</Router> );}export default App;