[Nginx, Webpack, React]/aaa/bbb のような深さが2次以上のパスにアクセスできない

Reactのルーティング周り、あるいはNginxの設定周りでハマってしまい、調べたのですがピンとくる情報がなかったので、質問させていただきます。
どうかよろしくお願いいたします。。。

前提・実現したいこと

Reactで見た目を作り、react-router-domでルーティングするアプリケーションを、webpackでビルドしてNginxで表示するようにしています。

例えば/user/editといったパスへのアクセスで、ユーザー編集画面を表示できるようにしたいのですが、現状できません。

/userや/loginといったパスの深さが1次のものは期待通りのページが表示されますが、/user/editのような深さが2次以上のページはうまく表示されません。

コンポーネントのディレクトリ構成は以下のようになっています。

├── src
│   ├── App
│   │   ├── Footer
│   │   │   └── index.jsx
│   │   ├── Header
│   │   │   └── index.jsx
│   │   ├── Home
│   │   │   └── index.jsx
│   │   ├── Login
│   │   │   └── index.jsx
│   │   └── User
│   │       ├── Confirm
│   │       │   └── index.jsx
│   │       ├── Edit
│   │       │   └── index.jsx
│   │       └── index.jsx

react-router-dom"でルーティングを制御しているsrc/index.jsxは以下のようになっております。
パスとコンポーネントの対応付は、別で配列でもって、.map() でそれぞれルーティングを設定しています。

src/index.jsx
1
2const routes = [
3  {
4    path: "/home",
5    component: Home,
6    name: "ホーム"
7  },
8  {
9    path: "/user/edit",
10    component: UserEdit,
11    name: "プロフィール編集"
12  },
13
14(略)
15
16                    {routes.map((route, index) => (
17                      <Route
18                        exaxt
19                        key={index}
20                        path={route.path}
21                        pageName={route.name}
22                        component={route.component}
23                      />
24                    ))}
25

Webpackの設定は以下です。
変な設定にはなっていないと思うのですが。。。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require("dotenv-webpack");

const src = path.resolve(__dirname, "src");
const dist = path.resolve(__dirname, "dist");

module.exports = {
  entry: ["@babel/polyfill", src + "/index.jsx"],
  output: {
    path: dist,
    publicPath: "/",
    filename: "[name]-[hash].bundle.js"
  },
  module: {
    rules: [
      {
        enforce: "pre",
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "eslint-loader",
            options: {
              formatter: require("eslint/lib/cli-engine/formatters/stylish")
            }
          }
        ]
      },
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: src + "/public/index.html",
      publicPath: "/",
      filename: "index.html"
    }),
    new Dotenv({
      path: "./.env"
    })
  ]
};

Nginxの設定は以下です。
ここも変なことはしていないと思っているのですが、なんとなくtry_files $uri $uri/ /index.html;のあたりがまずいのかなと思っていたりします。。。

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /var/www/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}