React Router + webpack: index. html не загружает компонент по умолчанию, если он открыт из выходной папки - PullRequest
Новая
       35

React Router + webpack: index. html не загружает компонент по умолчанию, если он открыт из выходной папки

0 голосов
/ 12 января 2020

Для своего проекта я использую реагирующий маршрутизатор, поэтому я добавил несколько таких компонентов: 

  return <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Main} />
        <Route path="/catalog" exact component={Catalog} />
        <Route path="/order" exact component={Order} />
        <Route path="/search" exact component={Search} />
        <Route path="/basket" exact component={Basket} />
        <Route render={() => <div style={{textAlign: `center`, fontSize: `70px`, padding: `100px 60px`, color: `#ccc`}}>Page not found</div>} />
      </Switch>
    </BrowserRouter>
}

Когда я собираю проект с помощью веб-пакета и запускаю его с помощью веб-сервера-разработчика, Основные компоненты отлично отображаются по адресу http://localhost: 1337 / . Но если я пытаюсь открыть только index. html в моей выходной папке (docs), я вижу компонент Page not found вместо Main.

Я считаю, что моя ошибка где-то в настройках, поэтому здесь есть webpack. config: 

const path = require(`path`);
const webpack = require(`webpack`);


module.exports = {
 entry: `./src/index.js`,
 output: {
   filename: `bundle.js`,
   path: path.join(__dirname, `docs`),
   publicPath: '/',
 },
 devServer: {
   contentBase: path.join(__dirname, `docs`),
   compress: false,
   open: true,
   port: 1337,
   historyApiFallback: true,
   hot: true
 },
 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
       exclude: /(node_modules)/,
       loader: 'babel-loader',
       options: {
           presets: ['@babel/preset-env',
                     '@babel/react',{
                     'plugins': ['@babel/plugin-proposal-class-properties']}]
       }
   }
   ],
 },
 devtool: `source-map`,


 resolve: {
   modules: [
     `node_modules`,
     path.resolve(path.join(__dirname, `docs`))
   ],
   extensions: [`.js`, `.jsx`, `.ts`, `.tsx`, `.webm`],
 },

 plugins: [
   new webpack.ProvidePlugin({
     React: `react`,
     ReactDOM: `react-dom`,
     cx: `classnames`,
     PropTypes: `prop-types`,
   })
 ]

};

Вот пакет. json: 

{
  "name": "mishkashop----html-css",
  "version": "1.0.0",
  "description": "Study project",
  "main": "webpack.config.js",
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "babel-preset-react": "^6.24.1",
    "prop-types": "15.7.2",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-redux": "7.1.3",
    "react-router-dom": "5.1.2",
    "redux": "4.0.4"
  },
  "devDependencies": {
    "@babel/core": "7.7.7",
    "@babel/preset-env": "7.7.7",
    "@babel/preset-react": "7.7.4",
    "babel-jest": "24.9.0",
    "babel-loader": "8.0.6",
    "css-loader": "^3.4.0",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.15.1",
    "jest": "24.9.0",
    "less-loader": "^5.0.0",
    "react-test-renderer": "16.12.0",
    "style-loader": "^1.0.2",
    "webpack": "4.41.4",
    "webpack-cli": "3.3.10",
    "webpack-dev-server": "3.10.1"
  },
  "scripts": {
    "test": "npm run eslint && jest",
    "build": "webpack --mode production",
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/glukomania/MiMiShop----HTML-CSS.git"
  },
  "author": " ",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/glukomania/MiMiShop----HTML-CSS/issues"
  },
  "homepage": "https://glukomania.github.io/MiMiShop----HTML-CSS/"
}
...