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.