无法获取路径Reactjs、nodejs

如何解决无法获取路径Reactjs、nodejs

我正在尝试从 Nodejs 为我的 react 应用程序提供服务，但是我收到了一个 GET 错误，这很奇怪，因为当我运行 npm start 并运行 react start 脚本时一切正常，但是一旦我使用 node.js 就可以了。 js它不起作用。此外，如果我通过输入或尝试向后导航来导航到路线，则会引发错误。例如，当您第一次导航到主页时，它会将您带到一个登录页面，如果我转到另一个页面然后回击，它会抛出一个 GET 错误，即使它事先工作过。

Node.js 服务器

const express = require('express');
const cors = require('cors');
const path = require('path');
const app = express();

require('dotenv').config()

app.use(express.static(path.join(__dirname,'build')));
app.use(express.json());
app.use(cors());



app.get('/',async (req,res) => {

    res.sendFile(path.join(__dirname,'build','index.html'));
    
    });




    app.listen(3000,() => {
        console.log(`Server listening on 3000`);
    });

React index.js

*/
import React from "react";
import ReactDOM from "react-dom";
import { createbrowserHistory } from "history";
import { Router,Route,Switch,Redirect } from "react-router-dom";
import { Auth0Provider } from "@auth0/auth0-react";

// core components
import Admin from "layouts/Admin.js";
import Authentication from 'layouts/Authentication';
import DashboardPage from "views/Dashboard/Dashboard.js";
import UserProfile from "views/UserProfile/UserProfile.js";

import "assets/css/material-dashboard-react.css?v=1.9.0";

const hist = createbrowserHistory();

ReactDOM.render(
  <Auth0Provider
  domain={`${process.env.REACT_APP_Auth0_Domain}`}
  clientId={`${process.env.REACT_APP_Auth0_ClientID}`}
  redirectUri={`http://localhost:3000/dashboard`}
  >
  <Router history={hist}>
    <Switch>
      <Route path="/login"  component={Authentication} />
      <Route path="/dashboard" component={DashboardPage} />
      <Route path="/user"  component={UserProfile} />
      <Redirect from='/' to='/login' />
    </Switch>
  </Router>,</Auth0Provider>,document.getElementById("root")
);

Routes.js

// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import Person from "@material-ui/icons/Person";

// core components/views for Admin layout
import DashboardPage from "views/Dashboard/Dashboard.js";
import UserProfile from "views/UserProfile/UserProfile.js";
import Authentication from './layouts/Authentication';

const dashboardRoutes = [
  {
    path: "/dashboard",name: "Invoice Dashboard",icon: Dashboard,component: DashboardPage,},{
    path: "/login",name: "Login",component: Authentication
  },{
    path: "/user",name: "User Profile",icon: Person,component: UserProfile,}
];

export default dashboardRoutes;

解决方法

此行为来自您在 node.js 服务器中的 express 应用。

查看您的声明：

app.get('/',async (req,res) => {
  res.sendFile(path.join(__dirname,'build','index.html')); 
});

当您请求路径 index.html 时，您的应用仅返回 '/' 文件。基本上，您的反应路由器仅通过对 '/' 的初始请求建立 - 允许反应 Link（例如）元素此后正确路由。这解释了为什么输入深层链接（例如 '/example-path'）并点击后退按钮会引发错误。

构建您的快速路由以处理特定 URL，并为所有其他 URL 返回 index.js 文件。这将允许 react router 处理您的前端路由，并且仍然允许 express 处理后端路由。

// An example api endpoint that returns a list of items
app.get('/api/getList',(req,res) => {
    var list = ["item1","item2","item3"];
    res.json(list);
    console.log('Sent list of items');
});

// Handles any requests that don't match the ones above
app.get('*',res) =>{
    res.sendFile(path.join(__dirname,'index.html')); 
});