Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – reactRouter is not working when paste full link url

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….

Tags:

2

Answers


  1. 0

    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. 0

    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