Objects are not valid as a React child error shown when using react-router-dom

Question

So, I'm using react-router-dom v6, and when I defined all the routing I got an error saying:

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

My react-router-dom version is 6.14.0. I'm using the exact same code as I used in my previous projects. The last project in which I used react-router-dom has version 6.11.2.

I have initialized BrowserRouter in the file index.js like this:

import App from "./App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

And I am initializing all the routes like this:

import Navbar from "./components/Navbar";
import Home from "./components/Home";
import { Routes, Route } from "react-router-dom";
import AddAPost from "./components/AddAPost";
import Login from "./components/Login";
import Register from "./components/Register";
import Post from "./components/Post";

function App() {
  return (
    <div className="app">
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/addapost" element={<AddAPost />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/posts:postid" element={<Post />} />
      </Routes>
    </div>
  );
}

I've also read the documentation of react-router-dom and everything seems fine comparing to their code.

Answer 1

It seems that you’re trying to render a promise object as a React child, so the problem is in one of your components.

Checkout the components and their default export. Probably your functional component is an async function.