React / Express没有正确的路由链接
所以，我有一个反应的项目，除了快递工作正常。 我很难findMERN堆栈教程正确路由与快速。
我发现了一些SOpost，但没有在我的项目中工作。 当我将某人连接到某个反应路线时，我得到“未find”。 我一直在这个公平的周围乱搞，因此被评论的静态中间件。
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是不相关的..
我怎样才能解决这个问题？
确保你require()每个文件require()都有一个modules.export 。 在这种情况下，将其添加到root.js中：
module.exports = router;
感谢接受这个答案的努力，这很酷;）
您可以将反应项目添加为静态内容来表示应用程序。
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创build项目，则应该为快速应用添加反应项目package.json文件代理。
{ "proxy": "http://localhost:500" // port can change according to your settings }
这里有一个详细的教程。 此外，create-react-app文档还包含有关使用Node的一些信息。