[Bug]: Redirect not working in production build

[Nguyenkhanh98]

What version of React Router are you using?

6.14.2

Vite 4.3.2

Steps to Reproduce

My app is using history version 5.3.0 and react-router-dom version 6.4.2.
Everything work good on development mode. But for production mode, all redirect not working.
I have try to chagne to older version but still get this issues.

Please could anyone can help me :(

Expected Behavior

redirect, history.push working

Actual Behavior

Prodcredirect, history not working in production mode

[Nguyenkhanh98]

HI for update I've change from BrowserRouter to Hashrouter and it's working. Then it is my short-term-solving

[brophdawg11]

If you can provide a minimal reproduction of the broken scenario we can look into it

[mechanizzed]

Same problem here, redirect not working.

 "vite": "^4.1.0"
 "react": "^18.2.0"
 "react-router-dom": "^6.14.2"

import { redirect } from 'react-router-dom';

export const createProduct = async (customer: CustomerProps) => {
  return redirect('/payment');
};

[brophdawg11]

This is not enough information for us to be able to assist. What is createProduct? Where/how is it called? What do your app routes look like? Are you using BrowserRouter or RouterProvider?

Please provide a working reproduction of the issue via CodeSandbox or in a working Github repository that we can use to look into.

[mechanizzed]

I can't publish it because it's a private project for a company, but I'll share the structure i'm using here:

Im working with a VITE React typescript project:

 "vite": "^4.1.0"
 "react": "^18.2.0"
 "react-router-dom": "^6.15.0"

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import { Router } from './routes/Router';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  </React.StrictMode>,
);

Router.tsx

import React, { useEffect, useContext } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

import { DashboardLayout } from '../domain/dashboard/layout';
import { Dashboard } from '../domain/dashboard/pages';
import { Profile } from '../domain/users/pages/profile/Profile';
import { Payment } from '../domain/users/pages/product/Payment';

export const Router = () => {

  return (
    <Routes>
        <Route path="dashboard" element={<DashboardLayout />}>
          <Route index element={<Dashboard />} />
          <Route path="profile" element={<Profile />} />
          <Route path="payment" element={<Payment />} />
        </Route>
    </Routes>
  );
};

DashboardLayout.txs

import { Outlet } from 'react-router-dom';
import { Header } from '../components/Header';

import { Sidebar } from '../components/Sidebar';
import { Footer } from '../components/Footer';

export const DashboardLayout = () => {
  return (
    <>
      <div className="bg-slate-200 dark:bg-ame-neutral-dark-100 flex gap-4 p-4 overflow-hidden">
        <Sidebar />

        <div className="flex-1 w-full">
          <Header />

          <main className="w-full min-h-screen m-auto">
            <Outlet />
          </main>
        </div>
      </div>

      <Footer />
    </>
  );
};

And in a simple ProfilePage for example i import redirect from react-router-dom and i do that:

ProfileExamplePage.tsx

import {  redirect } from 'react-router-dom';
import { useForm } from 'react-hook-form';

import { Card } from '../../../../components/Card';
import { TitlePages } from '../../../../components/TitlePages';


export const ProfileUpdate = () => {
  const { register } = useForm();
  return (
    <Card>
      <TitlePages title="Update Profile" />

       <button
          className="my-8 bg-black p-4"
          onClick={() => redirect('payment')}
        >
          REDIRECT
        </button>

    </Card>
  );
};

But, after click in a REDIRECT button, nothings happens.

Another test calling external function:

actions.ts

import { redirect } from 'react-router-dom';

export const createProposal =  () => {
  return redirect('payment');
};

Again, when i call this createProposal function in my Profile page, nothings happens.

[brophdawg11]

Ah - redirect is only intended for use in loaders/actions and those aren't supported by <BrowserRouter> - you need to be using a Data Router to leverage the data APIs (createBrowserRouter/RouterProvider).

To "redirect" in a BrowserRouter app without loader/action support you can leverage useNavigate