Javascript 反应/快报未正确路由链接

因此，我有一个react项目，除了express之外，它运行良好。我很难找到正确使用express进行路由的MERN stack教程

我已经找到了一些这样的帖子，但在我的项目中没有一个是有效的。当我将某人链接到快车上的反应路线时，我会得到“未找到”。我一直在胡乱地处理这件事，因此被注释掉了静态中间件

 Project Structurte

 Root 
      package.json
  Server
       Routes
           index.js
  app.js
  package.json
  Client
       Build
       Public
       Src

App.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var compression = require('compression')
var session = require('express-session');

var index = require('./routes/index');
var root = require('./routes/root')

var app = express();


app.use(compression({level: 9}))

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use(logger('dev'));

app.use(function(req, res, next) {
 res.setHeader('Cache-Control', 'no-cache');
 next();
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
//app.use(express.static(path.join(__dirname, 'public')));
//app.use(express.static(path.join(__dirname, '../client/build')));

app.use('/', root)
app.use('/api', index);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  console.error(err)
  // render the error page
  res.status(err.status || 500);
  res.send(err.message)
});

process.on('uncaughtException', function (err) {
  console.log(err);
})


module.exports = app;

Root.js

var express = require('express');
var router = express.Router();


router.get('*', function(req,res){ 
    console.log('fire')
       res.sendFile(__dirname, '../../client/build/index.html')
   })

客户端src中的React路由

import React from 'react';
import { Route, Switch } from 'react-router-dom'
import {Home} from './Home'
import {NotFound} from './NotFound'

import {Header} from './Header'
import {Foot} from './Footer'
import {StepOne} from './StepOne'
import {StepTwo} from './StepTwo'
import {Checkout} from './Checkout'
import {SubHead} from './SubHead'
import  {Product} from './Product'

import {Thankyou} from './Thankyou'

export const App = () => (
  <div>

    <Header />
    {/* <SubHead /> */}
    <main>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/stepone" component={StepOne} />
        <Route exact path="/steptwo" component={StepTwo} />
        <Route exact path="/checkout" component={Checkout} />
        <Route exact path='/thankyou' component={Thankyou} />
        <Route path='/crates/:crate'  component={Product} />
        <Route  component={NotFound} />
      </Switch>
    </main>

    <Foot />

  </div>
)

从“React”导入React；
从“react router dom”导入{Route，Switch}
从“/Home”导入{Home}
从“./NotFound”导入{NotFound}
从“./Header”导入{Header}
从“./Footer”导入{Foot}
从“/StepOne”导入{StepOne}
从“/StepTwo”导入{StepTwo}
从“./Checkout”导入{Checkout}
从“./SubHead”导入{SubHead}
从“/Product”导入{Product}
从“./Thankyou”导入{Thankyou}
导出常量应用=（）=>(
{/*  */}
)

API不相关

---

如何解决此问题？

您可以将react项目作为静态内容添加到express app

app.use(express.static('client/build)); // path must be relative to your express app

// or if you like to make it work on a sub root
app.use('/reactapp', express.static('client/build'));

{
    "proxy": "http://localhost:500" // port can change according to your settings
}

如果使用create react app创建项目，则应为express app添加react projects package.json文件代理

app.use(express.static('client/build)); // path must be relative to your express app

// or if you like to make it work on a sub root
app.use('/reactapp', express.static('client/build'));

{
    "proxy": "http://localhost:500" // port can change according to your settings
}

---

有一个详细的教程。另外，创建react应用程序文档还包括有关将其与节点一起使用的一些信息。

请确保所需的每个文件（）都有一个

模块。导出

。在这种情况下，将其添加到root.js：

module.exports = router;

---

感谢您努力接受这个答案，这很酷；）

您必须在根目录中导出某些内容，例如将其添加到文件末尾：module.exports=router；啊，谢谢你@JeffBreadner。小疏忽。如果你加上这个作为答案，我将投票并接受。