0
I made a small web system and deployed it in Heroku, it turns out that the routes work normally in development, but in production the routes are not rendered and I have the following error "Cannot GET [route name]" I have researched on several sites people with similar problems but still can not solve
my Index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter,Router, Route, Switch, Redirect, } from "react-router-dom";
// core components
import Admin from "layouts/Admin.js";
import Login from './Login/Login'
import "assets/css/material-dashboard-react.css?v=1.9.0";
//const hist = createBrowserHistory();
import {history} from './history'
import PrivateRoute from './PrivateRoute/PrivateRoute'
import { AuthProvider } from "./Provider/auth";
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/admin" component={Admin} />{/*rota home*/}
<Redirect from="/" to="/Login" />
</Switch>
</BrowserRouter>,
document.getElementById("root")
);
my package.json
{
"name": "meu-site",
"version": "1.9.0",
"private": false,
"main": "dist/index.js",
"dependencies": {
"@material-ui/core": "4.10.0",
"@material-ui/icons": "4.9.1",
"axios": "^0.21.1",
"chartist": "0.10.1",
"classnames": "2.2.6",
"crypto-js": "^4.0.0",
"express": "^4.17.1",
"formik": "^2.2.6",
"history": "4.10.1",
"perfect-scrollbar": "1.5.0",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-chartist": "0.14.3",
"react-dom": "16.13.1",
"react-google-maps": "9.4.5",
"react-redux": "^7.2.4",
"react-router-dom": "5.2.0",
"react-scripts": "3.4.1",
"react-swipeable-views": "0.13.9",
"redux": "^4.1.0"
},
"scripts": {
"dev": "react-scripts start",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"build-package": "npm run build-package-css && babel src --out-dir dist"
},
"optionalDependencies": {
"@types/googlemaps": "3.39.6",
"@types/markerclustererplus": "2.1.33",
"ajv": "6.12.2",
"typescript": "3.9.3"
},
"devDependencies": {
"eslint-config-prettier": "6.11.0",
"eslint-plugin-prettier": "3.1.3",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.8",
"prettier": "2.0.5"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": []
}
}
the deploy was made in Heroku and the failure also happens when trying to reload the page, the system opens the first page and according to that I click the buttons everything happens normally, but when I try to put the route name in the browser bar or try to reload the page it all happens.
Server:
const express = require('express')
const {resolve}= require('path')
const app = express()
app.use('/', express.static( resolve( __dirname, './build' ) ) )
app.listen(process.env.PORT || 3000,(err) => {
if(err){
return console.log(err)
}
console.log('Sistema no ar')
})
And the server code that’s serving the files is like?
– Rafael Tavares
I am using a "server.js" file and in package.json scripts at start goes "Node server.js"
const express = require('express')

const {resolve}= require('path')

const app = express()

app.use('/',
 express.static(
 resolve(
 __dirname,
 './build'
 )
 )
)



app.listen(process.env.PORT || 3000,(err) => {
 if(err){return console.log(err)}

 console.log('Sistema no ar')
})– E. Franklyn
the error message in Heroku is : at=info method=GET path="/admin" Dyno=web.1 connect=1ms service=3ms status=404 bytes=388 Protocol=https
– E. Franklyn
Turns out you’re only serving the route
/for your React application. Tryapp.use('/*', using/*instead of just/. This will make every request not met by anyapp.useprevious is dealt with in thisapp.use('/*'– Rafael Tavares
In doing so the errors changed from 404 to 301 or 304 I made the following change:
const express = require('express')

const {resolve}= require('path')

const app = express()

app.use('/*',
 express.static(
 resolve(
 __dirname,
 './build'
 )
 )
)

app.listen(process.env.PORT || 3000,(err) => {
 if(err){return console.log(err)}

 console.log('Sistema no ar')
})2021-05-13T18:15:16.723330+00:00 heroku[router]: at=info method=GET path="/static/js/2.69f5d869.chunk.js" status=301 bytes=520 protocol=httpsor status=304– E. Franklyn