CODEWITHSUNDEEP
reactjsreact-router
Adam Norton
Adam Norton

Reputation: 580

React Links - "requested URL was not found on this server" after being deployed

My React app works perfectly locally, and when I deploy, the index page loads up perfectly.

However when I click any of the nav buttons, I get the message "requested URL was not found on this server". It also says "Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request."

Can anyone tell me what I'm missing from my code? It's only the deployed version that is broken. 

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navigation from '../Navbar/Navbar';
import Home from '../../Pages/Home/Home';
import Services from '../../Pages/Services/Services';
import Bicultural from '../../Pages/Bicultural/Bicultural';
import Training from '../../Pages/Training/Training';
import Talent from '../../Pages/Talent/Talent';
import Mission from '../../Pages/Mission/Mission';
import Team from '../../Pages/Team/Team';
import About from '../../Pages/About/About';
import Blog from '../../Pages/Blog/Blog';
import Careers from '../../Pages/Careers/Careers';
import Contact from '../../Pages/Contact/Contact';
import NoMatch from '../../Pages/NoMatch/NoMatch';
import Footer from '../Footer/Footer';
import ScrollToTop from '../ScrollUpButton/ScrollToTop';


function App() {
  return (
    <div className="App">
      <React.Fragment>
        <Router>
          <Navigation className="no-bg" />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/services" component={Services} />
            <Route exact path="/bicultural" component={Bicultural} />
            <Route exact path="/training" component={Training} />
            <Route exact path="/talent" component={Talent} />
            <Route exact path="/mission" component={Mission} />
            <Route exact path="/team" component={Team} />
            <Route exact path="/about" component={About} />
            <Route exact path="/blog" component={Blog} />
            <Route exact path="/careers" component={Careers} />
            <Route exact path="/contact" component={Contact} />
            <Route component={NoMatch} />
          </Switch>
        </Router>
        <Footer />
        <ScrollToTop />
      </React.Fragment>
    </div>


  );
}

export default App;

Upvotes: 4

Views: 14029

Answers (1)

Adam Norton
Adam Norton

Reputation: 580

Ah, well it was my dumb mistake. Somewhere along the way, when I did a rebuild, my .htaccess file was deleted. Once i remade that and uploaded it, everything worked perfectly.

If you're having this issue, make a file called ".htaccess", and upload it to the same folder as your build.

The contents of your .htacces file should be this:

RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

Upvotes: 28

Related Questions