0

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

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

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页面。那么如何在这里进行路由，有人可以澄清一下吗？

4

1 回答 1

1

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

当您调用时，app.use您正在创建中间件，该中间件的行为与方法函数（如getor ）不同post。您可以阅读文档以获取更多详细信息，但实际上正在发生的事情是：对于中间件（但不是get,post等）/将匹配每个路由，并且因为该中间件是之前/detailComponent在您的代码中定义的，所以即使路由是/detailComponent.

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

于 2018-02-02T03:46:44.097 回答