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

Reactjs – I'm not able to resolve this routing issue of my react app after successfully deploying on vercel

i’m deploying my app through github on vercel

here’s the link:
website
on top right corner there’s a Navigate button, it redirects to a different route but if you referesh the page it says 404 not found, same thing is happening in netlify, i’m thinking it has something to do with my vite configuration, i don’t know :/

vite config:

import tsconfigPaths from "vite-tsconfig-paths";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    port: 4000,
  },
});

vite docs says not need for base:"/", which is by default.

main.tsx:

import React from "react";
import App from "./App.tsx";
import "@mantine/core/styles.css";
import "@mantine/carousel/styles.css";
import ReactDOM from "react-dom/client";
import { Provider } from "react-authbox";
import { theme } from "@/configs/theme.ts";
import { MantineProvider } from "@mantine/core";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MantineProvider theme={theme}>
      <Provider fetchUserUrl="http://localhost:3000/api/user">
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
    </MantineProvider>
  </React.StrictMode>
);

app.tsx:

import Routes from "@/routes/routes";

const App = () => <Routes />;

export default App;

Routes.tsx:

import AddBussinessInformationPage from "@/pages/client/addbussinessinformationpage";
import SelectCategoriesPage from "@/pages/client/selectcategoriespage";
import ProfileSetingsPage from "@/pages/client/profilesettingspage";
import { FormProvider } from "@/providers/formprovider";
import { Routes, Route } from "react-router-dom";
import ClientLayout from "@/components/layouts";
import HomePage from "@/pages/client/homepage";
import { FC } from "react";

const RoutesComponent: FC = () => {
  return (
    <Routes>
      <Route
        path="/"
        element={
          <FormProvider>
            <ClientLayout />
          </FormProvider>
        }
      >
        <Route index element={<HomePage />} />
        <Route path="profile-settings" element={<ProfileSetingsPage />} />
        <Route path="select-category" element={<SelectCategoriesPage />} />
        <Route
          path="/add-bussiness-information"
          element={<AddBussinessInformationPage />}
        />
      </Route>
    </Routes>
  );
};

export default RoutesComponent;

i tried base: "/" which is by default.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Added the verce.json file

    {

    "rewrites": [ { "source": "/(.*)", "destination": "/" } ] }

    to redirect all the request to root destination where index.html is located which renders the main.tsx, the routing is handled by the client.

    each platform require there own way of re-write config.


  2. 0

    I’d suggest you change how you nest your routes and add a BrowserRouter.

    const RoutesComponent: FC = () => {
  return (
    <BrowserRouter>
        <Routes>
          <Route
            path="/"
            element={<FormProvider/>}
          >
            <Route index element={<HomePage />} />
            <Route path="profile-settings" element={<ProfileSetingsPage />} />
            <Route path="select-category" element={<SelectCategoriesPage />} />
            <Route
              path="add-bussiness-information"
              element={<AddBussinessInformationPage />}
            />
          </Route>
        </Routes>
      </BrowserRouter>
  );
};

    Please also check if your Link is correct.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search