Несколько страниц с использованием relay-modern-isomorphic

Question

Я следовал этому уроку по реле-современному-изоморфному примеру: Ссылка

В этом уроке у них есть одна страница без маршрутизации,

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 только страница Итак, как сделать маршрутизацию здесь, может кто-нибудь прояснить мне это.

Answer 1

Вам нужно поменять местами порядок двух маршрутов.

Когда вы звоните app.use вы создаете промежуточное ПО, которое ведет себя не так, как функции метода, такие как get или же post, Вы можете прочитать документы для получения более подробной информации, но вот что эффективно происходит: для промежуточного программного обеспечения (но не get, post, так далее.) / будет соответствовать каждому маршруту, и потому что это промежуточное ПО определено ранее /detailComponent в вашем коде, он срабатывает, даже когда маршрут /detailComponent,

Тем не менее, если вы внедряете SSR и реализуете несколько маршрутов, вам, вероятно, следует изучить маршрутизацию всего на одну конечную точку в экспрессе и позволить библиотеке, такой как React Router, позаботиться обо всем остальном. Существует множество учебных пособий, которые показывают, как это сделать; вот только один