快速服务器路由问题 - 不允许其他路由仅本地路由工作答案

【问题标题】：Express server routing issue - does not allow for other routes only home route working快速服务器路由问题 - 不允许其他路由仅本地路由工作
【发布时间】：2019-01-13 03:48:50
【问题描述】：

我正在使用 React 学习 GraphQL，但遇到了路由问题。这主要来自快递，应用程序在主路由“localhost:4000/”上运行良好，但除此之外“localhost:4000/song”，我收到“无法获取 /song”错误。

这里是完整代码：Lyrical-GraphQL Demo

这是我的 server.js 文件：

const express = require('express');
const models = require('./models');
const expressGraphQL = require('express-graphql');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const schema = require('./schema/schema');

const app = express();

// Replace with your mongoLab URI
const MONGO_URI = 'mongodb://XXX:XXX@ds123371.mlab.com:23371/lyricaldb';
if (!MONGO_URI) {
    throw new Error('You must provide a MongoLab URI');
}

mongoose.Promise = global.Promise;
mongoose.connect(MONGO_URI);
mongoose.connection
    .once('open', () => console.log('Connected to MongoLab instance.'))
    .on('error', error => console.log('Error connecting to MongoLab:', error));


app.use(bodyParser.json());
app.use('/graphql', expressGraphQL({
    schema,
    graphiql: true
}));

const webpackMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('../webpack.config.js');
app.use(webpackMiddleware(webpack(webpackConfig)));

module.exports = app;

【问题讨论】：

标签： reactjs express react-router apollo-client

【解决方案1】：

我解决了，其实不是服务端路由问题，是react-router的HashRouter和BrowserRouter混淆了。

目前我正在使用 HashRouter，它工作正常。对于 BrowserRouter，您需要从服务器端正确设置所有路由。

感谢社区！

【讨论】：

【解决方案2】：

那是因为请求将发送到服务器。您看到的错误来自快速服务器。

您需要在server.js 中添加一个处理程序来捕获所有其他类似这样的请求

app.get('*', function(req, res) {
  res.sendfile('path-to-your-index-html');
});

事实上，我认为这个post 可能有用。

【讨论】：

感谢您的回复，是的，我认为可能是这样。在我的 server.js 文件中，我使用的是 app.use(bodyParser.json()); app.use('/graphql', expressGraphQL({ schema, graphiql: true })); const webpackMiddleware = require('webpack-dev-middleware'); const webpack = require('webpack'); const webpackConfig = require('../webpack.config.js'); app.use(webpackMiddleware(webpack(webpackConfig)));

【解决方案3】：

您需要定义要渲染的路由和相应的组件。这可能会有所帮助，

https://gist.github.com/siakaramalegos/df4620c52e829f6107c75d5c3f0ad7f5

【讨论】：

感谢您的回答。我尝试将“精确”属性添加到 Route，但仍然出现相同的错误。