404 Not Found page - reactjs [duplicate]

Question

I uploaded my site on server and my site works fine. but I have a problem.

when I go to route A from route B, B component loaded as well. but when I copy my B component url I got 404 Not Found page.

for example when I copy/paste this url:

http://test.shadyab.com/offers/Arya-Ceremonial-Pool-VIP-off

I got a 404 Not Found page.

my route:

import React from 'react'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute } from 'react-router'
import configureStore from 'store/configureStore'

import App from 'containers/App'
import Home from 'containers/Home'
import Detail from 'containers/Detail'
import Cart from 'containers/Cart'
import Login from 'containers/Login'
import Profile from 'containers/Profile'
import Category from 'containers/Category'

export default function(history) {
  return (
    <Router history={history}>
      <Route path="/" component={App}>
        <Route exact path="/offers/:id" component={Detail} />
        <Route path="/cart/cart" component={Cart} />
        <Route path="/login" component={Login} />
        <Route path="/profile/:section" component={Profile} />
        <Route path="/category/:city/:category" component={Category} />
        <IndexRoute component={Home} />
      </Route>
    </Router>
  )
}

my app.js:

import 'babel-polyfill'

import React from 'react'
import ReactDOM from 'react-dom'
import { browserHistory } from 'react-router'

import configureStore from 'store/configureStore'
import createRoutes from 'routes/index'
import { Provider } from 'react-redux'
import Immutable from 'immutable'
import _ from 'lodash'

let reduxState = {}
if (window.__REDUX_STATE__) {
  try {
    let plain = JSON.parse(unescape(__REDUX_STATE__))
    _.each(plain, (val, key)=> {
      reduxState[key] = Immutable.fromJS(val)
    })
  } catch (e) {
  }
}

const store = configureStore(reduxState)

ReactDOM.render((
  <Provider store={store}>
    { createRoutes(browserHistory) }
  </Provider>
), document.getElementById('root'))

Even if the user wants to refresh the current webpage, he will receive a 404 error.

my server language is php.

Answer 1

You need to configure your server to always serve your index.html file for all urls.

Here is one of the example how to do it in NodeJS.

https://stackoverflow.com/a/25374786/3187014

Answer 2

.htaccess file resolves same problem for me:

RewriteEngine On

# remove www from host
RewriteCond %{HTTP_HOST} ^www\.(.+)
RewriteCond %{HTTPS}s/%1 ^(on(s)|offs)/(.+)
RewriteRule ^ http%2://%3%{REQUEST_URI} [L,R=301]

# force HTTPS
RewriteCond %{HTTPS} =off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Don't rewrite files
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^ - [L]
# Rewrite everything else to index.html
RewriteRule ^ index.html [L]