部署和构建页面后的 REACT JS 不打开

Question

我是学生，我还在学习，但我需要帮助。

我真的需要帮助，这是一个项目

当我部署系统并通过构建运行时，初始页面可以正常工作，但所有重定向都没有。

如果您需要查看，页面已启动： http://calces.com.br/

在控制台上显示此错误：

Uncaught SyntaxError: Unexpected token '

经过一番搜索，我尝试更改服务器信息：

const root = require('path').join(__dirname, 'client', 'build')
app.use(express.static(root));
app.get("*", (req, res) => {
    res.sendFile('index.html', { root });
})

我已经更改了 .htaccess，我尝试了这两个选项：

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

和

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

这是我的路线，我已经尝试更改为 HashRouter，但什么都没有......

<BrowserRouter>
            <Switch>
                {/*Rota Cliente*/}
                <Route path="/" exact component={Dashboard} />
                <Route path="/produtos/:idProduto" exact component={ProdutoDetails} />
                <Route render={() => <h1>Not Found Page</h1>} />
                
                {/*Rota Admin*/}
                <Route path="/admin/login" exact component={Login} />
                <Route path="/admin" exact component={Dashboard} />

                <Route path="/admin/itens" component={Itens} />
                <Route path="/admin/itens/cadastrar" exact component={ItemCadastrar} />
                <Route path="/admin/itens/editar/:idItem" exact component={ItemEditar} />

                <PrivateRoute path="/admin/servicos" exact component={Servicos} />
                <PrivateRoute path="/admin/servicos/cadastrar" exact component={ServicoCadastrar} />
                <PrivateRoute path="/admin/servicos/editar/:idServico" exact component={ServicoEditar} />
           </Switch>
</BrowserRouter>

package.json（我曾尝试将“http://calces.com.br/”放在主页中，但因为找不到他们给我的路线）：

{
  
  "name": "client",
  "homepage":".",
  "version": "0.1.0",
  "private": true, 
  "dependencies": {
    "@date-io/date-fns": "^2.10.8",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/pickers": "^3.3.10",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.1",
    "axios": "^0.21.1",
    "date-fns": "^2.21.3",
    "moment": "^2.29.1",
    "mui-datatables": "^3.7.6",
    "react": "^17.0.1",
    "react-dnd": "^14.0.2",
    "react-dom": "^17.0.2",
    "react-moment": "^1.1.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

api.js

import axios from 'axios';

const api = axios.create({
    baseURL:'http://localhost:5000'
})

export default api;

服务器路由：

routes.get('/', Usuario.index);

// Rotas de Usuário
routes.post('/api/usuarios', Usuario.create);
routes.get('/api/usuarios', Usuario.index);
routes.get('/api/usuarios.details/:_id', Usuario.details);
routes.delete('/api/usuarios/:_id', Usuario.delete);
routes.put('/api/usuarios', Usuario.update);
routes.post('/api/usuarios/login', Usuario.login);
routes.get('/api/usuarios/checktoken', Usuario.checkToken);
routes.get('/api/usuarios/destroytoken', Usuario.destroyToken);

Answer 1

我能想到的一个原因是您的后端和前端可能具有相同的 API 端点。假设你去一个页面http://example.com/user 并且你的服务器也有相同的路由，那么将调用服务器路由而不是客户端/前端路由。

尝试为每个端点添加 /api 前缀。对于上面的例子 -

客户端路由 - /user
服务器路由-/api/user