M
M
Maxim Korolsky2017-03-27 15:40:18
React
Maxim Korolsky, 2017-03-27 15:40:18

Webpack not showing page with dynamic id?

There is a users page and a corresponding route. From this page, you can go to the user/:id route. But if you immediately insert a url like /user/123 into the address one, then the page is empty with errors
<Route path="/users" component={ Users } />
<Route path="/user/:id" component={ User } />


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

I had to get acquainted with Webpack only in the last project, webpack-dev-server is used as a server Tell me
where the error is
Here is a piece of the webpack config:
new WebpackDevServer(
  webpack(config),
  {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    contentBase: "public/"
  }
)
  .listen(80, 'www.site.com, error => {});

And not too big:
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'
      }
    },

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Aves, 2017-03-27
@SuperPosan

You can either specify absolute paths or use the base
tag

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

I
Islam Ibakaev, 2017-03-27
@devellopah

You're making a request to a server that you don't have, that's why the error.
you need to sketch a simple express server with a wildcard route in the entry point file, something like this

// ./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)

no matter where you reload the page, you will be thrown to the main page.
ps read about server-side rendering with react

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question