Output:

[HMR] Waiting for update signal from WDS...

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

App.js Code:

import Header from "./MyComponents/Header";
import { Todos } from "./MyComponents/Todos";
import { Footer } from "./MyComponents/Footer";
import { AddToDo } from "./MyComponents/AddTodo";
import { About } from "./MyComponents/About";
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

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

CodePudding user response：

You're most likely not exporting the App component from App.js to be able to render in index.js.

You are missing the line export default App at the bottom of App.js, and potentially an import in index.js.

Here's an example:

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './MyComponents/Header';
import { Todos } from './MyComponents/Todos';
import { Footer } from './MyComponents/Footer';
import { AddToDo } from './MyComponents/AddTodo';
import { About } from './MyComponents/About';


function App() {
  const [todos, setTodos] = useState([])

  const addTodo = (todo) => {
    //...
  } 

  const onDelete = (todo) => {
    //...
  }
  
  return (
    <Router>
      <Header title="My Todos List" searchBar={false} />
      <Routes>
        <Route
          path ="/"
          element={() => {
            return (
              <>
                <AddToDo addTodo={addTodo} />
                <Todos todos={todos} onDelete={onDelete} />
              </>
            )
          }}
        />
        <Route 
          path="/about"
          element ={<About />}
        />
      </Routes>
      <Footer />
    </Router>
  )
}

export default App

And in index.js, you need to import App and render it like this:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

CodePudding user response：

The issue here is that in RRDv6 the element prop is expecting JSX (i.e. a React.ReactElement), not a function returning JSX.

Routes & Route

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null;
  index?: boolean;
  path?: string;
}

<Route
  path ="/"
  element={() => { // <-- this is a function, not a ReactElement
    return (
      <>
        <AddToDo addTodo={addTodo} />
        <Todos todos={todos} onDelete={onDelete} />
      </>
    )
  }}
/>

Render the JSX directly.

<Route
  path ="/"
  element={(
    <> // <-- now a ReactElement
      <AddToDo addTodo={addTodo} />
      <Todos todos={todos} onDelete={onDelete} />
    </>
  )}
/>

Alternatively, you could also abstract the anonymous React component definition into a named React component and render as JSX.

const Home = () => {
  return (
    <>
      <AddToDo addTodo={addTodo} />
      <Todos todos={todos} onDelete={onDelete} />
    </>
  )
};

...

<Route
  path ="/"
  element={<Home />} // <-- now a ReactElement
/>