<p>I'm using <code>react-router-dom</code> to capture parameters from a url on my website, however everytime I try reaching my ending point at <code>www.mywebsite.com/video/id</code> I get a 404 response from my nginx ingress. I've configured it to point the incoming request to my frontend deployment appropriately but otherwise I don't know why the configuration isn't working properly:</p>
<p>My Ingress:</p>
<pre class="lang-yaml prettyprint-override"><code>apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
    name: ingress-service
    annotations:
        kubernetes.io/ingress.class: nginx
        cert-manager.io/cluster-issuer: &quot;letsencrypt-prod&quot;
        kubecnginx.ingress.kubernetes.io/ssl-redirect: 'true'

spec:
    tls:
        - hosts:
            - website.app
            - www.website.app
          secretName: website-app
    rules:
        - host: website.app
          http:
            paths:
                - path: /
                  backend:
                    serviceName: frontend-cluster-ip-service
                    servicePort: 3000
                - path: /video/*
                  backend:
                    serviceName: frontend-cluster-ip-service
                    servicePort: 3000
                - path: /api/
                  backend:
                    serviceName: backend-cluster-ip-service
                    servicePort: 5000
                - path: /payments/
                  backend:
                    serviceName: backend-cluster-ip-service
                    servicePort: 5000
                - path: /streaming/
                  backend:
                    serviceName: streaming-ip-service
                    servicePort: 3000
        - host: www.website.app
          http:
            paths:
                - path: /
                  backend:
                    serviceName: frontend-cluster-ip-service
                    servicePort: 3000
                - path: /video/*
                  backend:
                    serviceName: frontend-cluster-ip-service
                    servicePort: 3000
                - path: /api/
                  backend:
                    serviceName: backend-cluster-ip-service
                    servicePort: 5000
                - path: /payments/
                  backend:
                    serviceName: backend-cluster-ip-service
                    servicePort: 5000
                - path: /streaming/
                  backend:
                    serviceName: streaming-ip-service
                    servicePort: 3000
        
</code></pre>
<p>React code:</p>
<pre class="lang-js prettyprint-override"><code>function App() {
  return (
    &lt;div className=&quot;App&quot;&gt;
    &lt;RecoilRoot&gt;
      &lt;React.Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
      &lt;Router&gt;
  &lt;Switch&gt;
    &lt;Route exact path=&quot;/&quot; component={LandingPage}/&gt;
    &lt;Route exact path=&quot;/video/:id&quot; component={Video}/&gt;
  &lt;/Switch&gt;
&lt;/Router&gt;
      &lt;/React.Suspense&gt;
    &lt;/RecoilRoot&gt;
    &lt;/div&gt;
  );
}
</code></pre>
<p>UPDATE:</p>
<p>Jonas' answer does indeed fix the problem on the k8s ingress side, however the docker container actually running the react application must have its nginx.conf updated to work with <code>react-router-dom</code>. I provide the appropriate <code>Dockerfile</code> and <code>nginx/nginx.conf</code> (top level directory of your application) files below (courtesy of <a href="https://levelup.gitconnected.com/dockerizing-a-react-application-using-nginx-and-react-router-43154cc8e58c" rel="nofollow noreferrer">source</a>):</p>
<p><strong>Dockerfile:</strong></p>
<pre><code>FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY yarn.lock ./
RUN yarn install --frozen-lockfile
RUN yarn add react-scripts@3.4.1 -g --silent
COPY . ./
RUN yarn run build

# production environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD [&quot;nginx&quot;, &quot;-g&quot;, &quot;daemon off;&quot;]

</code></pre>
<p><strong>nginx/nginx.conf:</strong></p>
<pre><code>server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root  /usr/share/nginx/html;
  }
}
</code></pre>

Adrian Coutsoftides
<p>Since you don't want to use <em>exact match</em> on <code>path:</code>, you probably want to enable <a href="https://kubernetes.github.io/ingress-nginx/user-guide/ingress-path-matching/" rel="nofollow noreferrer">regex path matching</a> by adding an annotation:</p>
<pre><code>  annotations:
    nginx.ingress.kubernetes.io/use-regex: &quot;true&quot;
</code></pre>
<p>And then change your path:</p>
<pre><code>path: /video/*
</code></pre>
<p>to</p>
<pre><code>path: /video/.*
</code></pre>
<p>or something more specific matching your <code>/id</code> pattern.</p>
