React-Routes not rendering-CodePudding

here is my app.js

<Router>
        <Header title="My Todos List" />
        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" render={() => {
            return (
              <>
                <AddTodo addTodo={addTodo} />
                <Todos todos={todos} onDelete={onDelete} />
              </>)
          }} />
        </Routes>
        <Footer />
      </Router>

the render function is not rendering anything in my home page

CodePudding user response：

You can use element like this

          <Route path="/" elemen={      
              <>
                <AddTodo addTodo={addTodo} />
                <Todos todos={todos} onDelete={onDelete} />
              </>
             }
          />

CodePudding user response：

you have to use children prop for render prop from RR V5 - see the migration docs for ref

so change the Route as

<Route
  path="/"
  children={
    <>
      <AddTodo addTodo={addTodo} />
      <Todos todos={todos} onDelete={onDelete} />
    </>
  }
/>;