Даже если и так добавить, он не вырисовывает (

Компонент Аpp оберните в BrowserRouter

Спасибо 🙏 попробую

Зачем? Он внутри App есть же

Тоже самое показывает? Покажи новый код

Неправильно импортируете
BrowserRouter as Router, а не as Route

Оо спасибо:)) заработало 😁😊

И отдельно Route тоже заимпортить

Да так и сделала :)

всем привет подскажите пожалуйста как правильно и где подключаться  к сокетам, они мне нужны везде, но только после того как я авторизировался. Я сейчас добавил подключение токена в index.ts, но это срабатывает при рефреше страницы либо при первом открытии а если я делаю авторизацию пишу логин пароль и вхожу как мне тригерить подключение к  сокетам

мб кто знает плагин webstorm для расстновки префиксов в стилях

Auth ? Socket... : pass

:D

Нпм пакет autoprefixer

благодарствую

всем привет
у меня не запускается webpack-dev-server

package.json
"scripts": {
   "build": "webpack --config webpack.demo.config.js --mode production",
   "build:lib": "webpack --mode production",
   "build:types": "tsc --project tsconfig.types.json",
   "prepublish": "npm-run-all -s build:lib build:types",
   "start": "webpack-dev-server --config webpack.demo.config.js --https --mode development"
 },

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const pkg = require('./package.json');

module.exports = {
 entry: './src/index.tsx',
 output: {
   path: path.resolve(__dirname, 'build'),
   filename: '[name].[contenthash].js',
   publicPath: '/build/'
 },
 devServer: {
   historyApiFallback: true,
   watchOptions: { aggregateTimeout: 300, poll: 1000 },
   stats: {
     colors: true,
     hash: false,
     version: false,
     timings: false,
     assets: false,
     chunks: false,
     modules: false,
     reasons: false,
     children: false,
     source: false,
     errors: true,
     errorDetails: true,
     warnings: true,
     publicPath: false
   },
   port: 3000,
 },
 resolve: {
   alias: {
     '@components': path.resolve(__dirname, 'src/components'),
     '@styles': path.resolve(__dirname, 'src/styles'),
     '@hooks': path.resolve(__dirname, 'src/hooks'),
     '@example': path.resolve(__dirname, 'src/example'),
     '@utils': path.resolve(__dirname, 'src/utils'),
     '@contexts': path.resolve(__dirname, 'src/contexts')
   },
   extensions: ['.ts', '.tsx', '.js', '.json', '.scss', '.png', '.jpg', '.gif', '.jpeg']
 },
 module: {
   rules: [
     {
       test: /\.(jsx|tsx|js|ts)$/,
       use: [
         {
           loader: 'babel-loader'
         }
       ],
       exclude: /node_modules/
     },
     {
       test: /\.scss$/,
       use: [
         { loader: 'style-loader' },
         MiniCssExtractPlugin.loader,
         { loader: 'css-loader' },
         {
           loader: 'postcss-loader',
           options: { config: { path: path.join(__dirname, './postcss.config.js') } }
         },
         { loader: 'sass-loader', options: { sourceMap: true } }
       ]
     },
     {
       test: /\.less$/,
       use: [
         {
           loader: 'style-loader' // creates style nodes from JS strings
         },
         MiniCssExtractPlugin.loader,
         {
           loader: 'css-loader' // translates CSS into CommonJS
         },
         {
           loader: 'postcss-loader',
           options: { config: { path: path.join(__dirname, './postcss.config.js') } }
         },
         {
           loader: 'less-loader', // compiles Less to CSS,
           options: {
             javascriptEnabled: true
           }
         }
       ]
     },
     {
       test: /\.css$/,
       use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader']
     },
     
     {
       test: /\.(png|jpg|gif)$/,
       use: [
         {
           loader: 'file-loader',
           options: {
             name: '[path][name].[ext]'
           }
         }
       ]
     },
     {
       test: /.(ttf|otf|eot|woff(2)?)$/,
       use: [{
         loader: 'file-loader',
         options: {
           name: '[name].[ext]',
           outputPath: 'fonts/'
         }
       }]
     },
     {
       test: /\.svg$/,
       use: [
         {
           loader: 'svg-sprite-loader',
           options: {
             symbolId: '[name]'
           }
         }
       ]
     }
   ]
 },
 optimization: {
   minimizer: [new OptimizeCSSAssetsPlugin({})]
 },
 plugins: [
   new HtmlWebpackPlugin({
     template: './src/index.html'
   }),
   new MiniCssExtractPlugin({
     filename: '[name].css'
   }),
   new webpack.ProgressPlugin(),
   new CleanWebpackPlugin(),
   new ForkTsCheckerWebpackPlugin(),
   new FriendlyErrorsPlugin({
     clearConsole: true
   })
 ]
};

Не надо такие простыни в чат выкладывать

Допустим. Сообщение об ошибке было бы полезнее.

А чего на гитхабе не посмотрите примеры, как пишут?