Router in React

Question

I have deployed a website created with create-react-app and used netlify for deployment. All went fine except that I have discovered that, router doesn't work properly. Direct link and refresh of the page ca I have to mention that I haven't created any backend for it. My router looks like this:

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch
} from 'react-router-dom';
import ScrollToTop from './components/scroll-top';
import HomePage from './pages/homepage';
import AboutPage from './pages/aboutPage';
import ContactPage from './pages/contactPage';
import ServicesPage from './pages/servicesPage';
import PrivacyPolicy from './pages/privacy';


class App extends Component {
  render(){
    return (
      <Router>
        <ScrollToTop >
          <Switch>
              <Route exact path= {process.env.PUBLIC_URL + "/"} component={HomePage} />
              <Route path={process.env.PUBLIC_URL +"/about"} component={AboutPage}  />
              <Route path={process.env.PUBLIC_URL + "/contact"} component={ContactPage} />
              <Route path={process.env.PUBLIC_URL + "/services"} component={ServicesPage} />
              <Route path={process.env.PUBLIC_URL + "/privacy"} component={PrivacyPolicy} />
          </Switch>
        </ScrollToTop>
      </Router>
    );
}};


export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Joe Lloyd · Accepted Answer · 2020-02-28 08:32:59Z

1

netlify deployments are for static sites

To get your app to work correctly you must generate a static site with tools like Gatsby or Next.js (this Next.js link will take you to the static site generation)

The reason is that netlify will not run your router code on the server. It will only server static files.

Hope this give you some clarity.

answered Feb 28, 2020 at 8:32

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Router in React

1 Answer 1

netlify deployments are for static sites

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

netlify deployments are for static sites

Comments

Your Answer

Sign up or log in

Post as a guest

Related