Issues with remix and useGo with remix router
I have the following error: Cannot update a component (
RouterProvider) while rendering a different component (
Index). To locate the bad setState() call inside
Index, follow the stack trace as described in
some of
_root.tsx:
```
import '@fontsource-variable/manrope';
import {Refine} from "@refinedev/core";
import {authProvider} from "~/data/auth-provider.js";
import routerProvider from "@refinedev/remix-router";
export const links: LinksFunction = () => [
{rel: "stylesheet", href: stylesheet},
];
export function Layout({children}: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<Meta/>
<Links/>
</head>
<body>
{children}
<ScrollRestoration/>
<Scripts/>
</body>
</html>
);
}
export default function App() {
return (
<Refine
authProvider={authProvider}
routerProvider={routerProvider}
>
<Outlet/>
</Refine>
);
}
```
routes/_index.tsx`
Tried both use effect and just returning the go function.
Thanks for any help.2 Replies
Hi @pcfreak30. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the extracts, it seems like you're trying to use the
useGo
hook from Refine to navigate to a different route. However, the error message you're seeing suggests that you're trying to update a component during the rendering of a different component.
In your routes/_index.tsx
file, you're calling the go
function inside a useEffect
hook. This is generally a good practice to avoid updating state during render, but it seems like it's causing an issue in this case.
Unfortunately, the extracts provided do not contain a direct solution to your problem. However, they do provide some insights into how routing and navigation are handled in Refine.
For instance, in the Remix usage guide (https://refine.dev/docs/routing/integrations/remix#usage), the useGo
hook is used inside a button click handler, not inside a useEffect
hook. This might be a more appropriate place to call go
, as it ensures that the navigation only happens after a user interaction, not during the rendering of a component.
Here's an example from the extracts:
In this example, the go
function is called when the button is clicked, which navigates to the "show" action of the "products" resource.
If you're still having issues, I would recommend checking out the Refine documentation (https://refine.dev/docs/guides-concepts/routing#router-integrations) for more information on routing and navigation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@114588115343114245> kapa.ai is still learning and improving, please let us know how it did by reacting below