Issue with React-Route not displaying components

Question

Issue with React-Route not displaying components

Below is the code snippet from my app.js file:

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

I'm facing an issue where the render function is not displaying anything on my homepage.

javascript html css reactjs

Answer 1

Answer №1

If you want to incorporate elements in this manner

          <Section route="/" component={      
              <>
                <AddTask addTask={addTask} />
                <Tasks tasks={tasks} onDelete={onDelete} />
              </>
             }
          />

Answer 2

If you want to incorporate elements in this manner

          <Section route="/" component={      
              <>
                <AddTask addTask={addTask} />
                <Tasks tasks={tasks} onDelete={onDelete} />
              </>
             }
          />

Answer 3

Answer №2

To utilize the children prop with the render prop in React Router v5+, refer to the migration documentation for guidance.

Simply update the Route as follows:

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

Answer 4

To utilize the children prop with the render prop in React Router v5+, refer to the migration documentation for guidance.

Simply update the Route as follows:

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

Issue with React-Route not displaying components

Answer №1

Answer №2

Similar questions

What could be the reason behind Strapi v4 only displaying the initial 25 articles? Discussing Next.js and React

What could be causing the lack of responsiveness on this page?

Display issue with grid-template-column not appearing

Ways to conceal all components except for specific ones within a container using JQuery

Is it possible to have dual images as the background for an HTML div?

Can a variable be declared within the path references of the Firebase database?

Elm div contenteditable loses cursor position after content update

The React-Virtualized Autosizer component is returning a height value of 0 when used with VirtualScroll

Oops, it seems like there was an issue with NextJS 13 Error. The createContext functionality can only be used in Client Components. To resolve this, simply add the "use client" directive at the

Utilizing Jquery on the client side in conjunction with a Node.js server

Switching over a function from jQuery to Mootools

Executing certain test suites with defined capabilities in Protractor

How come my invocation of (mobx) extendObservable isn't causing a re-render?

Implement a captivating hover effect on every single element within a particular class

expanding menu options in a dynamic design

What is the best way to query based on a nested object property in Mongoose?

Using data across multiple instances in node.js EJS partials

Tips for creating nested master-detail or master-detail-detail queries in Loopback

Exploring TypeScript Module Importation and WebPack Integration

"Making changes to the HTML data attribute as desired, however, the updates are not reflecting on