[Bug]: useNavigate does not work in production

[PavelKudrautsau]

What version of React Router are you using?

v6

Steps to Reproduce

I have my standard web application on react, when I work locally, react router dom v6 works correctly, but when I send the code to the server, to my extension site. const navigate = useNavigate(); does not work, at the same time RouterLink works correctly

Expected Behavior

const navigate = useNavigate() work correctly

Actual Behavior

const navigate = useNavigate(); does not work

[kiliman]

Can you provide some code? When you say it doesn't work, what do you mean?

Are you calling navigate(to) on a route defined in React Router? That is, you can't navigate to an external route via the hook.

[PavelKudrautsau]

Can you provide some code? When you say it doesn't work, what do you mean?

Are you calling navigate(to) on a route defined in React Router? That is, you can't navigate to an external route via the hook.

export const routes = {
    login: '/',
    forgotPassword: '/forgot-password',
    newPassword: '/new-password/:userId/:code',
    main: '/main',
    chat: '/chat',
} as const;

export const useRouter = () => {
    const router = createBrowserRouter([
        {
            path: routes.login,
            element: <LoginPage />,
        },
        {
            path: routes.forgotPassword,
            element: <ForgotPasswordPage />,
        },
        {
            path: routes.newPassword,
            element: <NewPasswordPage />,
        },
        {
            path: routes.main,
            element: <MainPage />,
        },
        {
            path: routes.chat,
            element: <ChatPage />,
        },
        {
            path: '*',
            element: <Navigate to={routes.login} replace />,
        },
    ]);
    return router;
};

my main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

my App

import { RouterProvider } from 'react-router-dom';
import { useRouter } from './utils/routes';
import { ThemeProvider } from '@emotion/react';
import { createTheme } from '@mui/material/styles';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

function App() {
    const queryClient = new QueryClient();
    const router = useRouter();
    const theme = createTheme({
        palette: {
            primary: {
                main: '#399190',
                dark: '#2E6461',
                light: '#5FB2B3',
                contrastText: '#FFFFFF',
            },
            secondary: {
                main: '#4A64A2',
                dark: '#254B94',
                light: '#94A3C7',
                contrastText: '#FFFFFF',
            },
            error: {
                main: '#D32F2F',
                dark: '#C62828',
                light: '#EF5350',
                contrastText: '#FFFFFF',
            },
            warning: {
                main: '#EF6C00',
                dark: '#D96303',
                light: '#FF9800',
                contrastText: '#FFFFFF',
            },
            info: {
                main: '#0288D1',
                dark: '#01579B',
                light: '#03A9F4',
                contrastText: '#FFFFFF',
            },
            success: {
                main: '#2E7D32',
                dark: '#1B5E20',
                light: '#4CAF50',
                contrastText: '#FFFFFF',
            },
        },
        typography: {
            fontFamily: 'Roboto',
        },
    });

    return (
        <QueryClientProvider client={queryClient}>
            <ThemeProvider theme={theme}>
                <RouterProvider router={router} />
            </ThemeProvider>
        </QueryClientProvider>
    );
}

export default App;

and I try use navigate in my login page. Locally everything works, but on the prod site navigate doesn't work

  const onConfirmAuthorization = () => {
        navigate(routes.main);
    };

[kiliman]

When you say it "doesn't work", do you mean it doesn't navigate to /main?

Are you sure the onConfirmationAuthorization function is being called?

Have you tried just adding a button with an onClick handler that navigates to verify navigate works?

[PavelKudrautsau]

When you say it "doesn't work", do you mean it doesn't navigate to /main?

Are you sure the onConfirmationAuthorization function is being called?

Have you tried just adding a button with an onClick handler that navigates to verify navigate works?

yes, I tried

[PavelKudrautsau]

update, I've got the site deployed on Amazon S3 bucket