Issue with useNavigate() Hook in Custom React-Admin Application

Question

I'm facing a challenging issue in my React-Admin application. When I try to use the useNavigate() hook within my custom login component (MyLoginPage), I'm getting the following error:

[Route] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Problematic Behavior: The error occurs exclusively within MyLoginPage, which is set as the loginPage prop in the <Admin> component of React-Admin, suggesting it should inherently have routing context.

Setup:

Shell Component: Acts as a wrapper around React-Admin's <Admin> for Firebase auth state handling. MyLoginPage component: Custom login component using useNavigate() for post-login redirects. Here's a snippet from MyLoginPage where useNavigate() is invoked:

MyLoginPage component

import { useNavigate } from "react-router-dom";
// ... other imports

const MyLoginPage = () => {
  const navigate = useNavigate(); // this line triggers the error
  // ... rest of the component
};

And here's how MyLoginPage is used within the app structure:

App component

import { Admin } from "react-admin";
import MyLoginPage from "./MyLoginPage";
import { Shell } from "./Shell";

const App = () => {
  return (
    <Shell>
      <Admin loginPage={MyLoginPage} /* ... other props ... */>
        {/* ... resources ... */}
      </Admin>
    </Shell>
  );
};

Attempts to Resolve:

• Ensured MyLoginPage is rendered as a child of <Admin>.
• Checked for additional <Router> instances that might conflict with React-Admin's router context.

I'm stumped as to why useNavigate() is losing context within MyLoginPage. Could this be an issue with the order in which components are mounted? Any advice or insights would be greatly appreciated!

Answer 1

Update: I've managed to resolve the issue. It turns out I was missing the react-admin-firebase package in my dependencies, which is crucial for integrating Firebase authentication with React-Admin. After adding it to my project, the useNavigate() hook is now working correctly within my MyLoginPage component. Thank you to everyone for your time and assistance!