React SPA works on dev machine but only first level routes work on Azure

Question

Upon publishing my locally working React app to Azure I notice that all routes like

'/login' '/user' '/company'

work but things like

'/directory/clients'

do not. As a test I moved "clients" above to /clients and that worked but then /clients/ABC did not. Obviously something is fishy with my routing and I think I'm missing something simple but I just can't put my finger on it.

My app is a react front end with a web api .net core back-end.

Sample from routes.js /firm works while /directory/clients does not.

  { path: '/firm', exact: true, name: 'Firm', component: Firm },
  //{ path: '/clients', exact: true, name: 'Clients', component: Clients },
  { path: '/directory/clients', exact: true, name: 'Clients', component: Clients },
  { path: '/directory/clients/clientsimport', exact: true, name: 'Client Import', component: ClientsImport },
  { path: '/directory/clients/:clientId/clientaccount/:id', exact: true, name: 'Client Account', component: ClientAccount },
  { path: '/directory/clients/:id', exact: true, name: 'Client', component: Client },

          <main className="main">
            <AppBreadcrumb appRoutes={routes}/>
            <Container fluid>
              <Switch>
                {routes.map((route, idx) => {
                  return route.component ? <Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => 
                    sessionStorage.getItem('token') 
                      ? <route.component {...props} />
                      : <Redirect to="/login" />
                  } />
                    : null;
                  },
                )}
                <Redirect from="/" to="/directory/clients" />
              </Switch>
            </Container>
          </main>

Answer 1

Got it to work via the application of virtual directories in Azure. The web.config url rewrite method did not work by itself. The paths above are obviously examples.