CODEWITHSUNDEEP
reactjsdeploymentnetlify
danH
danH

Reputation: 105

Router in React

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>

Upvotes: 0

Views: 48

Answers (1)

Joe Lloyd
Joe Lloyd

Reputation: 22373

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.

Upvotes: 1

Related Questions