React / Express 未正确路由链接答案

【问题标题】：React / Express not routing links correctlyReact / Express 未正确路由链接
【发布时间】：2018-02-07 03:23:45
【问题描述】：

所以，我有一个除了 express 之外运行良好的 react 项目。我很难找到有关正确使用 express 路由的 MERN 堆栈教程。

我找到了一些 SO 帖子，但在我的项目中都没有。当我将某人链接到快递上的反应路线时，我得到“找不到”。我一直在玩弄这个，因此注释掉了静态中间件。

 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 不相关..

我该如何解决这个问题？

【问题讨论】：

你必须在根目录下导出一些东西，比如在文件末尾添加这个：module.exports = router;
啊，谢谢@JeffBreadner。小疏忽。如果您将此添加为答案，我会投票并接受。

标签： javascript node.js reactjs express react-router

【解决方案1】：

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

module.exports = router;

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

【讨论】：

【解决方案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 中使用它的信息。

【讨论】：