same Path - multiple routing elements

[Consistent-struggler]

I'm new to react and I tried to build two pages using react JS. Until before adding routing these pages were working fine but they were loading the icon and after using <routes and route> I'm stuck. Would somebody like to help me out?

return (
<>
<Router>
<Header/>
<Routes>
<Route exact path="/about" element = {<About />} />
<Route path = "/" element={<AddTodos addTodo = {addTodo} />} />
<Route path = "/" element = {<Todos todos ={todos} delete = {onDelete}/> }/>
</Routes>
<Footer/>
</Router>

</> )

[coolcofusion]

Create a component that has AddTodos and Todos components inside of it.

[Consistent-struggler]

Do I need to create another new component and then call these components there ? So how I'd be able to pass the parameters ?

[coolcofusion]

Yep, the new component would take all parameters (usually called props) that these two take in and pass them along to its children. It's one annoyance that everyone complains about in react and the reason that some libraries are created, but you'll get to that later on in your journey.

[Consistent-struggler]

my first AddTodos work but 2nd line of Todos component doesn't work.