react-router-dom@6 nested route

답변 감사합니다. webpack.config.ts 파일에서devServer: { historyApiFallback: true,historyApiFallback 설정 트루로 되어있어요. path="/signup"로 하면 나오던 signup 컴포넌트가 path="/signup/form" 으로 바꿔서 슬래쉬 하나 더 쓰면 SignUp 컴포넌트도 안보이네요.. (사진)(사진)터미널을 보니까 에러가 떳더라구요.. (사진)Error parsing bundle asset 해결하려고 구글해봤는데 옳은 방법인지는 모르겠지만.. 아래 코맨드를 터미널에 쳐봤습니다.webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json dist/(사진)이런 에러가 뜹니다..아래는 제 webpack.config.ts 파일입니다.import path from 'path'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack, { Configuration as WebpackConfiguration } from 'webpack'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } const isDevelopment = process.env.NODE_ENV !== 'production'; const config: Configuration = { name: 'slact-front', mode: isDevelopment ? 'development' : 'production', devtool: !isDevelopment ? 'hidden-source-map' : 'inline-source-map', resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), '@typings': path.resolve(__dirname, 'typings'), }, }, entry: { app: './client', }, target: ['web', 'es5'], module: { rules: [ { test: /\.tsx?$/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['IE 10'] }, debug: isDevelopment, }, ], '@babel/preset-react', '@babel/preset-typescript', ], env: { development: { plugins: [ ['@emotion/babel-plugin', { sourceMap: true }], require.resolve('react-refresh/babel'), ], }, production: { plugins: ['@emotion/babel-plugin'], }, }, }, }, { test: /\.css?$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new ForkTsCheckerWebpackPlugin({ async: false, // eslint: { // files: "./src/**/*", // }, }), new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production', }), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/', }, devServer: { historyApiFallback: true, port: 3090, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, hot: true, proxy: { '/api/': { target: 'http://localhost:3095', changeOrigin: true, ws: true, }, }, }, }; if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push( new ReactRefreshWebpackPlugin({ overlay: { useURLPolyfill: true, }, }), ); config.plugins.push( new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: false }), ); } if (!isDevelopment && config.plugins) { config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true })); config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' })); } export default config;

혹시 파트 2는 언제쯤 나올까요?

감사합니다.