React/Express没有正确地路由链接

所以，我有一个反应项目，工作正常，除了快递。我很难找到MERN堆栈教程正确路由与快速。React/Express没有正确地路由链接

我发现了一些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是不相关的..

我该如何解决这个问题？

来源

2017-08-29 Quesofat

必须导出根的东西，比如增加这该文件的结尾：module.exports = router; –

啊，谢谢@JeffBreadner。小监督。如果您将此添加为答案，我会赞成并接受。 – Quesofat

请确保您所有的文件require()都有modules.export。在这种情况下，将它添加到root.js：通过接受这个作为答案的努力去

module.exports = router;

谢谢，这很酷;）

来源

2017-08-30 17:42:47

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

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

如果您有创建反应的应用程序内创建你的项目，你应该添加反应项目的package.json文件的代理为您的明确程序。

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

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

来源

2017-08-29 16:29:18 bennygenel

React/Express没有正确地路由链接

回答

相关问题