2

I am developing a react application using create-react-app, react-router V4.3.1. When I do npm start the development server runs fine and on subsequent code change the page auto reloads and I can traverse to different route paths where I am rendering different components like /login, /sign-up etc.

Now the issue comes with the production build, when I do npm run build, the build is successful and later on, as per create-react-app docs I try to run my app on server using serve -s build.

The routing is not working, as the root page "/"(http://localhost:5000) loads fine, but on subsequent clicks on Login and Sign Up buttons the routing to /login and /sign-up fails. It gives me 404(The requested path could not be found) error.

App.js :

import React, { Component } from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const Onboarding = React.lazy(() =>
  import("./Components/Onboarding/Onboarding")
);
const Login = React.lazy(() => import("./Containers/Login/Login"));
const SignUp = React.lazy(() => import("./Containers/SignUp/SignUp"));
const LoginLegal = React.lazy(() =>
  import("./Components/LoginLegal/LoginLegal")
);

class App extends Component {
  render() {
    return (
      <div className="App">
        <React.Suspense fallback={<div>Page is loading...</div>}>
          <Router>
            <Switch>
              <Route
                exact
                path="/"
                render={props => <Onboarding {...props} />}
              />
              <Route path="/login" render={props => <Login {...props} />} />
              <Route path="/sign-up" render={props => <SignUp {...props} />} />
              <Route
                path="/legal"
                render={props => <LoginLegal {...props} />}
              />
            </Switch>
          </Router>
        </React.Suspense>
      </div>
    );
  }
}
export default App;

manifest.json :

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

_redirects :

#Redirects for netlify to enable SPA routing.
#This file is added to enable routes to different paths when website is hosted on netlify.
#Make sure that in manifest.json file we should have : "start_url": "./index.html"

/*    /index.html   200

The _redirects and "start_url": "./index.html" in manifest.json file has been done to enable netlify routing which is working fine.

No homepage has been specified in package.json file.

What should be added/modified so that routing works fine with serve -s build ?

Appreciate your help.

Shantanu Tomar
  • 1,572
  • 7
  • 38
  • 64
  • Albeit [this solution](https://stackoverflow.com/a/50590387/11185338) isn't for the exact problem as yours, it should address it. – Rusty Shackelford Mar 11 '19 at 14:04
  • @RustyShackelford Thanks for the reply. As per the solution, I tried changing the path but didn't work. Alternatively, I tried using live-server and inside my "build" folder I did "live-server --entry-file=index.html" and it worked fine. – Shantanu Tomar Mar 12 '19 at 05:22

0 Answers0