0

I have created a site using react js. It is working fine on my local system using browserHistory but not working on my production server. The first time it loads properly. When I refresh the page it gives me "page not found" error.

I have tried using hashHistory. It resolved my issue but I am looking for a better solution because I don't want complex URL hashHistory which includes # and a random key. (We want it to encapsulate to something like http://example.com/about and not like http://example.com/#/about?_k=9yfmfq )

My webpack.config.js code - 

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000
  }
};

Looking for a solution in apache2. Sorry for asking a noob question.

Kirti Nirkhiwale
  • 51
  • 3
  • So... it is a node.js app? – Anthony Kong Apr 19 '17 at 10:10
  • No.On the backend I have user WordPress. I have sent axios request from react js to WordPress – Kirti Nirkhiwale Apr 19 '17 at 10:25
  • the code you provide is for dev server? Where is your production configuration? Are you using any server like apache or nginx? – Fazal Rasel Apr 19 '17 at 10:32
  • You need post more information about your setup of Wordpress. Why do you use Wordpress? How do you use it? Your problem is messing up routing systems of your Wordpress and ReactJS application. You need to set up it correctly. But without any information about your solution stack it is very difficult for others to answer your question. – Michael Sivolobov Apr 19 '17 at 10:35

1 Answers1

2

The Problem is When you load for the first time one yourdomain.com, your server serve the index.html file as default. So, when you try yourdomain.com/something, your server try to find that file but as its not there, it will send 404. You have to configure your server to redirect all page request to index.html file.

Here is a simple nginx configuration for single page application-

location / {
    try_files $uri /index.html;
}

this will redirect all url to index.html which will load your javascript and then all the routes will handled by javascript.

Fazal Rasel
  • 4,446
  • 2
  • 20
  • 31