Question 291334 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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!


  2. 0

    I’m not expert with react-admin package but the doc is clear,
    Documentation admin-react custom hook useLogin

    in src/MyLoginPage.js

    import * as React from 'react';
import { useState } from 'react';
import { useLogin, useNotify, Notification } from 'react-admin';

const MyLoginPage = ({ theme }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const login = useLogin();
    const notify = useNotify();

    const handleSubmit = e => {
        e.preventDefault();
        // will call authProvider.login({ email, password })
        login({ email, password }).catch(() =>
            notify('Invalid email or password')
        );
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                name="email"
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
            />
            <input
                name="password"
                type="password"
                value={password}
                onChange={e => setPassword(e.target.value)}
            />
        </form>
    );
};

export default MyLoginPage;

    I thinks that will redirect autmatically to your content.

    No use useNavigate() hook, it’s automatically added to menu item (i thinks)

    [For use custom menu item redirection to custom routes in application][https://marmelab.com/react-admin/CustomRoutes.html#adding-custom-routes-to-the-menu]

    Say me if that work. I’m curious.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search