Webpack не показывает страницу с динамическим ID?

Question

[Максим Корольский]

Есть страничка users и соответсвующий роут
<Route path="/users" component={ Users } />
С этой страницы можно перейти на роут user/:id
<Route path="/user/:id" component={ User } />

Но если в адрессную вставить сразу url вида /user/123 то страница пустая с ошибками

Failed to load resource: the server responded with a status of 404 (Not Found) style.css
Failed to load resource: the server responded with a status of 404 (Not Found) bundle.js

С Webpack пришлось знакомиться только в последнем проекте, в качестве сервера используется webpack-dev-server

Подскажите где ошибка
Вот кусочек webpack конфига:

new WebpackDevServer(
  webpack(config),
  {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    contentBase: "public/"
  }
)
  .listen(80, 'www.site.com, error => {});

И еще не большой:

entry: {
        app: [
            'webpack-dev-server/client?http://www.site.com:80',
            'webpack/hot/only-dev-server',
            './app/index'
        ],
        vendor: []
    },
    devServer: {
      port: 80,
      host: 'http://www.site.com',
      historyApiFallback: true,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
      }
    },

Comments

[Aves]

эти файлы по относительному пути подключаются или по абсолютному?

[Максим Корольский]

Aves эти это которые? Которые вебпак собирает?

<script src="vendor.js"></script>
    <script src="bundle.js"></script>

[Максим Корольский]

Aves они вообще нигде не собираются, их не существует, я не понял как это работает ))

[Aves]

Максим Корольский: ну вот он и пытается их найти по пути /users/bundle.js и тп. Используй абсолютные.

[Максим Корольский]

Aves спасибо. Добавил / и все работает

[Aves]

Максим Корольский: еще вариант использовать <base href="/">https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

[Максим Корольский]

Aves отлично!

[Максим Корольский]

Напишите ответ, отмечу вас к решение

Answer 1

[Aves]

Можно либо указывать абсолютные пути
<script src="/bundle.js"></script>
либо использовать тэг base

<base href="/">
<script src="bundle.js"></script>

Answer 2

[Islam Ibakaev]

ты же делаешь запрос на сервер, которого у тебя нет, поэтому и ошибка.
нужно набросать простенький express сервер с wildcard роутом в entry point файле, примерно так

// ./index.js
const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// Handles all routes so you do not get a not found error
app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

где бы ты не делал перезагрузку страницы тебя будет выкидывать на главную.

p.s. почитай про server-side rendering with react