I can't release code in Production when useNavigate not working ?

[rubysky17]

• Currently, i have been install package react-router-dom v6.12.0 and running in React App.
• I'm using normal in localhost (development mode). I can use useNavigate function to redirect to the onther page.
• After that, i built my code on Production. My useNavigate is not working and I can't redirect page.
• Thank for all if you see my discussion.
• Node Version: v18.16.0, NPM version: 9.5
• Package.json:
  { "name": "google-apps", "version": "0.1.0", "private": true, "dependencies": { "@hookform/resolvers": "^2.9.10", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^14.4.1", "@types/jest": "^29.2.0", "@types/node": "^18.6.3", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "apexcharts": "^3.39.0", "chart.js": "^3.9.1", "i18next": "^21.8.9", "i18next-browser-languagedetector": "^6.1.4", "jwt-decode": "^3.1.2", "moment": "^2.29.4", "rc-dialog": "^9.0.0", "react": "^18.2.0", "react-apexcharts": "^1.4.0", "react-cropper": "^2.1.8", "react-dom": "^18.2.0", "react-hook-form": "^7.38.0", "react-i18next": "^11.18.6", "react-router-dom": "^6.12.1", "react-scripts": "5.0.1", "semaphore": "^1.1.0", "swr": "^1.3.0", "typescript": "^4.8.4", "web-vitals": "^3.0.3", "wrangler": "^2.0.24", "yup": "^0.32.11" }, "devDependencies": { "@commitlint/cli": "^17.0.3", "@commitlint/config-conventional": "^17.0.3", "@types/react-router-dom": "^5.3.3", "@types/semaphore": "^1.1.1", "husky": "^8.0.1", "sass": "^1.55.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "checkTs": "tsc --noEmit", "prepare": "husky install" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
• My Router config:
• Index.tsx file:
  `
  import App from "./App";
  import reportWebVitals from "./reportWebVitals";
  import { BrowserRouter } from "react-router-dom";

// Initialize languages
import "./locales/i18n";

const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);

root.render(



);`

• App.tsx file:
  `
  import { NoLanguage, Notfound } from "pages";
  import { Fragment } from "react";
  import { Route, Routes } from "react-router-dom";
  import { AuthProvider } from "services/auth";
  import { AppProvider } from "services/embed";
  import { MasterHOC } from "services/hocs";
  import { MasterLayout } from "./components/Layout";
  import { ErrorBoundary } from "components/Boundary";
  import { ProtectedRoutes, PublicRoutes } from "./routes";
  import RoutePropagator from "RoutePropagator";

function App() {
return (

{PublicRoutes.map((route: any, index: number) => {
const Component = route.component;
let Layout: any = MasterLayout;

            if (route.layout) {
              Layout = route.layout;
            } else if (null === route.layout) {
              Layout = Fragment;
            }

            return (
              <Route
                key={index}
                path={route.path}
                element={
                  <Layout>
                    <Component />
                  </Layout>
                }
              />
            );
          })}

          {ProtectedRoutes.map((route: any, index: number) => {
            const Component = route.component;
            let Layout: any = MasterLayout;

            if (route.layout) {
              Layout = route.layout;
            } else if (null === route.layout) {
              Layout = Fragment;
            }

            return (
              <Route
                key={index}
                path={route.path}
                element={
                  <Layout>
                    <MasterHOC {...route}>
                      <Component />
                    </MasterHOC>
                  </Layout>
                }
              />
            );
          })}

          <Route path="/no-support-language" element={<NoLanguage />} />
          <Route path="*" element={<Notfound />} />
        </Routes>
      </AuthProvider>
    </AppProvider>
  </ErrorBoundary>
</div>

);
}

export default App;`

[brophdawg11]

See #10579