Fiz um pequeno sistema web e fiz deploy dele no heroku, acontece que as rotas funcionam normalmente em desenvolvimento, mas em produção as rotas não são renderizadas e tenho o seguinte erro "Cannot GET [nome da rota]" ja pesquisei em diversos sites pessoas com problemas parecidos mas ainda não consegui resolver
meu 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")
);
meu 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": []
}
}
o deploy foi feito no heroku e a falha tambem acontece quando tenta recarregar a pagina, o sistema abre a primeira pagina e de acordo que vou clicando nos botões tudo acontece normalmente, mas quando tento colocar o nome da rota na barra do navegador ou tento recarregar a pagina isso tudo acontece.
Servidor:
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')
})
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') })
/
para a sua aplicação React. Experimenteapp.use('/*'
, usando/*
ao invés de apenas/
. Isso fará com que toda requisição não atendida por algumapp.use
anterior seja tratada nesteapp.use('/*'
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=https
ou status=304