React-router多层url无法访问

Question

求教！小白折腾一天了没搞定😭
如图所示，这样写路由，第一张浏览器截图是可以访问的，第二张无法访问，其间还实验了'/test/*','/test(/:name)'等写法，都不成。
我不知道是不是webpack配置问题，也是自己学着写的，贴一下看能否对问题有帮助

webpack.base.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.join(__dirname, '/dist')
    },
    resolve: {
        alias: {
            '@store': path.resolve(__dirname, 'src/store.js'),
            '@utils': path.resolve(__dirname, 'src/utils')
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            }, {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/
            }, {
                test: /\.less$/,
                use: ['style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'less-loader'],
            }, {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }, {
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: 'url-loader'
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                  loader: 'url-loader',
                  // loader: 'file-loader',
                  options: {
                    esModule: false, // 这里设置为false
                    name: '[name].[ext]',
                    limit: 10240,
                    outputPath: './images',
                    publicPath: '/images'
                  }
                }]
              }
        ]
    },
    // 配置相应的插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin()
    ]
};

webpack.dev.config.js

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');

module.exports = merge(baseConfig, {
    mode: 'development',
    devServer: {
        proxy: {
            '/api': {
                target: 'http://172.16.10.74:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        },
        historyApiFallback: true
    }
}
);