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:
MyLoginPage
is rendered as a child of <Admin>
.<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!
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!