reactjs Route Not Found The requested URL

Question

I am using Apache 2.2 to host my reactjs app ... in my App.js I have this code

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router,
        Route,
        Link,
        Switch,
        Redirect
 } from 'react-router-dom';
import Home from './components/Home';
import Cat from './components/Cat';

const NoMatch = ({ location }) => (
  <div>
        <h3>No match for <code>{location.pathname}</code> can be found.</h3>
  </div>
)

class App extends Component {
  render()
    return (
      <Router>
        <div>
          <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/home" component={Home} />
          <Route exact path="/cat" component={Cat} />
          <Route component={NoMatch} />
        </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

I then use npm run build and everything in my build folder is moved to my DocumentRoot folder /var/www/html/home

In this /var/www/html/home i also have a .htaccess file and in that I have

  RewriteEngine On
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]
  RewriteRule ^ ./index.html

When i go to /Home it is fine and when i hit refresh it is ok. but then i click a link and it brings me to /cat and again it is fine but then when i refresh it shows

Not Found The requested URL /cat was not found on this server.

Has anyone come across this issue ? I see so much online about the .htaccess file fixing the issue but it has not worked for me at all

Answer 1

I had the same problem on the server, run npm run build, create a folder with the compiled project, inside build create the .htaccess file with:

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ ./index.html