Как правильно настроить webpack для react-router-dom?

Как правильно подключить react-router-dom к моему сайту? Т.к страница /Catalog отображается только тогда, когда в коде напрямую вставлен тег как в строке после < /Routes> .Иначе (если оставить только в route) просто пустая страница.

import React from "react"; import styles from "./App.module.scss"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Catalog from "./page/catalog/Catalog";  function App() {   return (     &lt;div className={styles.App}&gt;       &lt;BrowserRouter&gt;         &lt;Routes&gt;             &lt;Route               path={"/Catalog"}               element={&lt;Catalog&gt;&lt;/Catalog&gt;}             &gt;&lt;/Route&gt;         &lt;/Routes&gt;         {/* &lt;Catalog&gt;&lt;/Catalog&gt; */}       &lt;/BrowserRouter&gt;     &lt;/div&gt;   ); } export default App;

1

import React from "react"; import styles from "./App.module.scss"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Catalog from "./page/catalog/Catalog"; function App() { return ( <div className={styles.App}> <BrowserRouter> <Routes> <Route path={"/Catalog"} element={<Catalog></Catalog>} ></Route> </Routes> {/* <Catalog></Catalog> */} </BrowserRouter> </div> ); } export default App;

webpack.config.js

const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin");  module.exports = {     entry: {        filename: path.resolve(__dirname, "src/index.tsx")      },     output: {         path: path.resolve(__dirname, "dist"),         filename: '[name][contenthash].js',         clean: true,     },     module: {         rules: [             { test: /.(html)$/, use: ['html-loader'] },             {               test: /.(js|jsx)$/,                   exclude: /node_modules/,               use: ["babel-loader"],             },             {               test: /.tsx?$/,               use: 'ts-loader',               exclude: '/node_modules/'             },             {               test: /.(module.scss|scss)$/,               use: [                 {                    loader: "style-loader",                 },                 {                    loader: "css-loader",                   options: {                     modules: true,                      url : false                   },                 },                 {                    loader: "sass-loader",                 },               ],             },             {               test: /.(png|jpe?g|gif|webp)$/i,               use: [                 {                   loader: 'file-loader',                   options:{                     name: '[name].[ext]',                     outputPath: 'images'                   }                 },               ],             },         ],     },     resolve: {       extensions: [".*", ".js", ".jsx", '.ts', '.tsx',],     },     plugins: [         new HtmlWebpackPlugin({             title: "Мир",             filename: 'index.html',             template: "./src/index.html",         }),     ],     devServer: {         port: 3002,         hot: true,         historyApiFallback: true,         static:{           directory: path.join(__dirname, 'dist')         }     },     mode: 'development' };

1

Использую для создания сайта Webpack + typescript + react

Дополнительно:

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
07.04.2024

Ответить

Для правильной настройки Webpack для использования React Router DOM, вам необходимо учесть несколько ключевых моментов. Во-первых, у вас должен быть установлен React Router DOM в вашем проекте. Вы можете установить его с помощью npm или yarn:

npm install react-router-dom
или
yarn add react-router-dom

1

2

3

npm install react-router-dom

или

yarn add react-router-dom

Затем вам нужно настроить Webpack для правильной обработки маршрутов. Для этого вам нужно настроить правила для загрузчика babel-loader, чтобы он транспилировал JSX код. Вы также должны настроить правила для загрузчика файлов, чтобы обрабатывать изображения и другие статические ресурсы.

Пример конфигурации Webpack для React Router DOM может выглядеть следующим образом:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ]
  },
  devServer: {
    historyApiFallback: true
  }
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

const path = require('path');

module.exports = {

entry: './src/index.js',

output: {

path: path.resolve(__dirname, 'dist'),

filename: 'bundle.js',

publicPath: '/'

},

module: {

rules: [

{

test: /\.(js|jsx)$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader'

}

},

{

test: /\.(png|jpe?g|gif)$/i,

use: [

{

loader: 'file-loader',

},

],

},

]

},

devServer: {

historyApiFallback: true

}

};

Обратите внимание на параметр historyApiFallback в блоке devServer. Он необходим для корректной работы React Router DOM, чтобы обрабатывать маршруты на стороне клиента.

Теперь вам нужно настроить ваш компонент App, чтобы использовать BrowserRouter вместо обычного Router:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    
      
        
        
        
      
    
  );
};

export default App;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

import React from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {

return (

);

};

export default App;

Теперь ваш проект должен правильно работать с React Router DOM, используя настроенный Webpack. Не забудьте перезапустить dev-сервер после внесения изменений в конфигурацию Webpack.

Как правильно настроить webpack для react-router-dom?

Дополнительно:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как правильно настроить webpack для react-router-dom?

Дополнительно:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно