skip to Main Content

i have a host with two app reactjs in my host
host->certmanager/…file code reactjs builed
host->cer/… filecode reactjs builed

   <Router basename='/certmanager'>
          <ThemeModeProvider> {/* Bọc ứng dụng với ThemeModeProvider */}
            <AuthProviderWithNavigate>
              <ModalProvider>
                <Header />
                <div>
                  <Routes>
                    <Route path="/Login" element={<SignIn />} />
                    <Route path="/Reset/:code" element={<ResetPassword />} />
                    <Route path="/Register" element={<Register />} />
                    <Route path="*" element={<NotFound />} />
                    <Route element={<PrivateRoutes />}>
                      <Route path="/" element={<HomePage />} />
                      <Route path="/group" element={<Group />} />
                      <Route path='/myinfo' element={<Myinfo />} />
                      <Route element={<PrivateType_Admin />}>
                        <Route path="/info" element={<InfoList />} />
                      </Route>
                    </Route>
                  </Routes>
                </div>
                <BottomNav />
              </ModalProvider>
            </AuthProviderWithNavigate>
          </ThemeModeProvider>
        </Router>
in my package-lock.json-> "homepage": "https://abc.or/certmanager/",

when i go to abc.com/certmanager, i will go to abc.or/certmanager/Login(because i need to
login)

const PrivateRoutes = () => {
  const { isAuthenticated } = useAuth();
  if (!isAuthenticated) {
    return <Navigate to="/Login" replace />;
  }
  return <Outlet />;
};

but when i paste full link abc.or/certmanager/Login into url, i go to 404 not found?

what should i do? thank you….

2

Answers


  1. Here are the issues, I could see.

    1. Could it be that the problem stems from not adding this to your private routes.
    return <Navigate to="/certmanager/Login" replace />;
    
    1. If that still persists then it might be that your server config-file(maybe nginx if you are using this) does not allow traffic, or does not follow the same /path/to/your/build/folder;

    2. If you are getting routing errors it might be a case of adding this to your base ref. This allows React app to it’s served from a subdirectory (/certmanager). Add the following tag below:

    <html lang="en">
      <head>
        <title>company app </title>
        <meta charset="UTF-8" />
        <base href="/certmanager/" /> <!<--add this -->
      </head>
      <body class="mat-typography">
        <app-root></app-root>
      </body>
    </html>
    
    

    Alternatively

    <Router basename='/certmanager'>
        {/* all your routes */}
    </Router>
    
    Login or Signup to reply.
  2. You are recommended to use newer features of react-router-dom to prevent issues like this. Consider using actions and loaders to simplify building and avoid these bugs.

    in your action function, you can simply return a redirect:

    import {
      Form,
      useLoaderData,
      redirect,
    } from "react-router-dom";
    import { updateContact } from "../contacts";
    
    export async function action({ request, params }) {
      const formData = await request.formData();
      const updates = Object.fromEntries(formData);
      await updateContact(params.contactId, updates);
      return redirect(`/contacts/${params.contactId}`);
    }
    

    While your router looks like this:

    import EditContact, {
      action as editAction,
    } from "./routes/edit";
    
    const router = createBrowserRouter([
      {
        path: "/",
        element: <Root />,
        errorElement: <ErrorPage />,
        loader: rootLoader,
        action: rootAction,
        children: [
          {
            path: "contacts/:contactId",
            element: <Contact />,
            loader: contactLoader,
          },
          {
            path: "contacts/:contactId/edit",
            element: <EditContact />,
            loader: contactLoader,
            action: editAction,
          },
        ],
      },
    ]);
    
    ReactDOM.createRoot(document.getElementById("root")).render(
      <React.StrictMode>
        <RouterProvider router={router} />
      </React.StrictMode>
    );
    

    See tutorial

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search