部署有react-router-dom和apollo-server-express问题的react

如何解决部署有react-router-dom和apollo-server-express问题的react

我在部署React路由器和Apollo服务器时有一些问题。 当在端口4000上启动nodemon index.js，然后在浏览器URL中写入http：// localhost：4000 / graphql而不显示Playground用户界面并重定向到http：// localhost：4000并显示我的应用登录页面时，如何从中跳过此URL反应路线并显示游乐场ui？

这是我的节点index.js：

const http = require("http");
const express = require("express");
const path = require("path");
const { ApolloServer } = require("apollo-server-express");
const cors = require("cors");
const { typeDefs } = require("./startup/typeDefs");
const resolvers = require("./startup/resolvers");
const { contexts } = require("./startup/contexts");

const app = express();
const PORT = process.env.PORT || 4000;

app.use(cors());

app.use(express.static("static"));

const apolloServer = new ApolloServer({
  typeDefs: typeDefs,resolvers: resolvers,subscriptions: {
  onConnect: (connectionParams) => {
     if (connectionParams["x-auth-token"]) {
        const token = connectionParams["x-auth-token"];
        return { token };
     }

      throw new Error("Missing auth token!");
    },},context: contexts,introspection: true,playground: true,});

apolloServer.applyMiddleware({ app,path: "/graphql"});


app.use(express.static("client/build"));
app.get("*",(req,res) => {
   res.sendFile(path.resolve(__dirname,"client/build","index.html"));
});

const httpServer = http.createServer(app);
apolloServer.installSubscriptionHandlers(httpServer);

httpServer.listen(PORT,() => {
   console.log(`run on Port ${PORT}`);
});

这是我的路线

<Switch>
      <ProtectedRoute
        role={[1,2,3]}
        path="/missions"
        component={MissionPage}
      />
      <ProtectedRoute
        role={[1,2]}
        path="/experts"
        component={ExpertsPage}
      />
      <ProtectedRoute
        role={[1,4]}
        path="/addresses"
        component={AddressesPage}
      />
      <ProtectedRoute
        role={[1,3,4]}
        path="/home"
        component={HomePage}
      />
      <ProtectedRoute path="/profile" component={ProfilePage} />
      <Route path="/un-authorized" component={UnAuthorizePage} />
      <Route path="/error-page" component={TryAgain} />
      <Route exact path="/" component={LoginPage} />
</Switch>