所以,我有一個反應項目,工作正常,除了快遞。我很難找到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是不相關的..
我該如何解決這個問題?
必須導出根的東西,比如增加這該文件的結尾:module.exports = router; –
啊,謝謝@JeffBreadner。小監督。如果您將此添加爲答案,我會贊成並接受。 – Quesofat