I am learning connecting MongoDB Realm to react by following this article. The problem with this article is that it is outdated, and the newer version of react doesn't support component = {Home} in react-router and perhaps not the render = {()={}} also. When I shamelessly copy-pasted all code and then ran it I got this warning

index.js:21 Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.

then I changed the code(a line) for the Home page just for testing to this

<Route path="/" element={()=><MongoContext.Consumer>{(mongoContext) => <Home mongoContext={mongoContext}/>}</MongoContext.Consumer>} />

Then I got a new warning, LOL!

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.

I have no what to do now. So, if anyone knows how to solve this, then it will be helpful for me.

App.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from "./pages/Home"
import * as Realm from 'realm-web'
import Authentication from './pages/Authentication';
import LogOut from './pages/Logout';
import Navigation from './components/Navigation';
import MongoContext from './MongoContext';
import 'bootstrap/dist/css/bootstrap.min.css'
import { Container } from "react-bootstrap"
import { useEffect, useState } from 'react';


function renderComponent (Component, additionalProps = {}) {
  return <MongoContext.Consumer>{(mongoContext) => <Component mongoContext={mongoContext} {...additionalProps} />}</MongoContext.Consumer>
}


function App() {

  const [client, setClient] = useState(null)
  const [user, setUser] = useState(null)
  const [app, setApp] = useState(new Realm.App({ id: "restaurant_app-qbafd" }))

  useEffect(() => {
    async function init() {
      if (!user) {
        setUser(app.currentUser ? app.currentUser : await app.logIn(Realm.Credentials.anonymous()))
      }

      if (!client) {
        setClient(app.currentUser.mongoClient('mongodb-atlas'))
      }
    }

    init();
  }, [app, client, user])

  return (
    <BrowserRouter>
      <Navigation user={user} />
      <MongoContext.Provider value={{ app, client, user, setClient, setUser, setApp }}>
        <div className="App">
          <header className="App-header">
            <Routes>
              <Route path="/signup" render={() => renderComponent(Authentication, {type: 'create'})} />
              <Route path="/signin" render={() => renderComponent(Authentication)} />
              <Route path="/logout" render={() => renderComponent(LogOut)} />
              <Route path="/" element={()=><MongoContext.Consumer>{(mongoContext) => <Home mongoContext={mongoContext}/>}</MongoContext.Consumer>} />
            </Routes>
          </header>
        </div>
      </MongoContext.Provider>
    </BrowserRouter>
  );
}

export default App;

CodePudding user response：

Try to wrap all your routes in the MongoContext.Consumer:

<BrowserRouter>
  <Navigation user={user} />
  <MongoContext.Provider
    value={{ app, client, user, setClient, setUser, setApp }}
  >
    <MongoContext.Consumer>
      {(mongoContext) => (
        <div className='App'>
          <header className='App-header'>
            <Routes>
              <Route
                path='/signup'
                element={
                  <Authentication mongoContext={mongoContext} type='create' />
                }
              />
              <Route
                path='/signin'
                element={<Authentication mongoContext={mongoContext} />}
              />
              <Route
                path='/logout'
                element={<LogOut mongoContext={mongoContext} />}
              />
              <Route path='/' element={<Home mongoContext={mongoContext} />} />
            </Routes>
          </header>
        </div>
      )}
    </MongoContext.Consumer>
  </MongoContext.Provider>
</BrowserRouter>;