subroute (nested URL) in react app render empty page

11 Views Asked by At

I made a project mern with coreUI and production on ubuntu server with nginx. The problem is that any nested url like "domain.com/dashboard/dashboard" or "domain.com/profile/commandes" render an empty page. But when i go to "domain.com/profile" it render the page correctly.

This is code of "App.js" routing of dashboard CoreUI:

return (
    <Router>
      <Header montant={montant} />
      <ScrollUp />
      <Suspense fallback={loading}>
        <Routes>
          <Route
            exact
            path="/signin"
            name="Login Page"
            element={
              <AuthRoute>
                <Login />
              </AuthRoute>
            }
          />
          <Route
            exact
            path="/register"
            name="Register Page"
            element={<Register />}
          />
          <Route exact path="/phone" name="Register Page" element={<PhoneRoute><Phone /></PhoneRoute>} />
          <Route exact path="/validate" name="Validate Page" element={<Token />} />
          <Route
            exact
            path="/reset"
            name="Reset Page"
            element={<Reset />}
          />
          <Route exact path="/404" name="Page 404" element={<Page404 />} />
          <Route exact path="/500" name="Page 500" element={<Page500 />} />
          <Route
            exact
            path="/dashboard/*"
            name="Dashboard"
            element={
              <ApprovedRoute>
              <AdminRoute>
                <DefaultLayout />
              </AdminRoute>
              </ApprovedRoute>

            }
          ></Route>

This is nginx config:

server {

listen 80 default_server;

listen [::]:80 default_server;

server_name domain.com www.domain.com;

root /var/www/site;

index index.html;

try_files $uri /index.html;

}

I'm expecting to get page fully rendered whatever the url is.

0

There are 0 best solutions below