Question

所以，我有一个反应项目，除了快递外，工作正常。我很难在正确的路由上找到关于路由的MERN堆栈教程。

我发现了一些SO帖子，但在我的项目中没有任何工作。当我将某人链接到快递上的反应路线时，我得到“未找到”＃39;。我一直在讨论这个公平的静态中间件。

 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中反应路由

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>
)

API并不相关......

我该如何解决这个问题？

Answer 1

确保require()的每个文件都有modules.export。在这种情况下，将其添加到root.js：

module.exports = router;

感谢您接受这个作为答案的努力，这很酷;）

Answer 2

您可以将react项目添加为静态内容来表达应用程序。

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'));

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

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

有详细的教程here。此外，create-react-app文档还包含有关将其与Node一起使用的一些信息。

React / Express没有正确路由链接

2 个答案: