the code showing white screen , even not showing header and footer . but when I remove a code in route tag , it shaw header and footer .
<><BrowserRouter>
<Header title="My Todos List" searchBar={false} />
<Routes>
<Route exact path="/" render={() => {
return (
<>
<Addtodo addTodo={addTodo} />
<Todos todos={todos} onDelete={onDelete} />
</>)
}}>
</Route>
<Route exact path="/about">
<About />
</Route>
</Routes>
<Footer />
</BrowserRouter>
</>
It seems you are mixing up the react-router-dom v5 Route API while using v6. The Route component doesn't take a component or render props, and only other Route components can be a child of a Route. They now take only an element prop that takes a ReactElement, a.k.a. JSX. Also gone is the exact prop. In RRDv6 routes are now always exactly matched.
<BrowserRouter>
<Header title="My Todos List" searchBar={false} />
<Routes>
<Route
path="/"
element={(
<>
<Addtodo addTodo={addTodo} />
<Todos todos={todos} onDelete={onDelete} />
</>
)}
/>
<Route path="/about" element={<About />} />
</Routes>
<Footer />
</BrowserRouter>
I have also encountered similar problems to you before. Does the content in the routing block the Header and Footer. you can change style of layout