showing white screen when put content in <Route> tag in react

user_15092711 0
Viewed 384

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>
</>
jsx react-router-dom reactjs javascript
2 Answers

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>
user_86908570

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

user_72953970
Related