使用中继现代同构的多个页面答案

【问题标题】：Multiple pages using relay-modern-isomorphic使用中继现代同构的多个页面
【发布时间】：2018-02-01 23:09:54
【问题描述】：

我遵循了这个中继现代同构示例教程：Link

在那个教程中，他们有一个没有路由的页面，

import express from 'express';
import graphQLHTTP from 'express-graphql';
import nunjucks from 'nunjucks';
import path from 'path';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import {schema} from './data/schema';
import renderServer from './js/renderServer';
import renderServer2 from './js/renderServer2';
const APP_PORT = 3000;
const GRAPHQL_PORT = 8080;

// Expose a GraphQL endpoint
const graphQLServer = express();
graphQLServer.use('/', graphQLHTTP({schema, pretty: true}));
graphQLServer.listen(GRAPHQL_PORT, () => console.log(
  `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}`
));

// Serve the Relay app
const compiler = webpack({
  entry: path.resolve(__dirname, 'js', 'app.js'),
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        test: /\.js$/,
      },
    ],
  },
  output: {filename: 'app.js', path: '/'},
  devtool: 'source-map'
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/',
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true},
});

nunjucks.configure('views', {autoescape: true});

// Serve static resources
app.use('/public', express.static(path.resolve(__dirname, 'public')));
app.use('/', renderServer);
app.use('/detailComponent', renderServer2);
app.listen(APP_PORT, () => {
  console.log(`App is now running on http://localhost:${APP_PORT}`);
});

在上面的代码中，默认情况下它位于localhost:3000，同样我想添加另一个带有url localhost:3000/detailComponent的页面。但它只会向我显示localhost:3000 页面。那么如何在这里进行路由，有人可以澄清一下吗？

【问题讨论】：

标签： reactjs graphql react-relay isomorphic-relay

【解决方案1】：

你需要交换两条路线的顺序。

当您调用app.use 时，您正在创建中间件，该中间件的行为与get 或post 等方法函数不同。 You can read the docs 了解更多详细信息，但实际上正在发生的事情是：对于中间件（但不是 get、post 等）/ 将匹配每个路由，因为该中间件已定义在您的代码中/detailComponent 之前，即使路由是/detailComponent，它也会触发。

也就是说，如果您正在实现 SSR 并实现多个路由，您可能应该考虑将所有内容以 express 方式路由到一个端点，并让像 React Router 这样的库来处理其余的事情。有很多教程展示了如何做到这一点； here's just one.

【讨论】：