Я не могу получить доступ к страницам, переходя по URL после развертывания heroku - PullRequest
Новая
       7

Я не могу получить доступ к страницам, переходя по URL после развертывания heroku

0 голосов
/ 13 апреля 2020

Надеюсь, у всех все хорошо. Я все еще новичок ie, поэтому, пожалуйста, потерпите меня! Извините: (.

Так что я пытаюсь выяснить эту проблему с моим веб-приложением. Это приложение MERN-стека, которое я недавно развернул на heroku, так что "по-видимому" все работает нормально, и я могу ориентироваться с помощью кнопок. и все, серверные маршруты работают так же хорошо, но когда я пытаюсь перемещаться по разным страницам, используя URL-адреса, что означает: Если я на этой странице: "https://mywebsite/home" Я хочу перейти к "https://mywebsite/login" например. Приложение просто сохраняет загружается, а затем вылетает и показывает ошибку heroku 

An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command

А также, когда обновляет любую страницу, она делает то же самое!

Что ж, я провёл некоторое исследование по этому поводу и заметил, что некоторые люди говорят о клиентских маршрутах. ? Я не уверен, поэтому, если вы сможете объяснить мне это лучше, я буду очень счастлив!

Вот мой сервер. js

app.use(
  bodyParser.urlencoded({
    extended: false,
  })
);
app.use(bodyParser.json());

// DB Config
const db = config.get("mongoURI");
// Connect to MongoDB
mongoose
  .connect(db, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("MongoDB successfully connected"))
  .catch((err) => console.log(err));

app.use("/uploads", express.static("./uploads"));
// Passport middleware
app.use(passport.initialize());
// Passport config
require("./config/passport")(passport);
//Routes
app.use("/api/developers", users);
app.use("/api/testers", testers);
app.use("/api/games", gameRoutes);
app.use("/api/review", reviews);
app.use("/api/admins", adminRoute);
app.use("/api/notifications", notifications);
app.use("/api/categories", categories);

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
  app.get("*", () => () => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html"));
  });
}
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server up and running on port ${port} !`));

И мое приложение. js файл 

<Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route
          path="/developer"
          exact
          render={(props) => <DeveloperDashboard {...props} />}
        />
        <Route
          path="/tester"
          exact
          render={(props) => <TesterDashboard {...props} />}
        />
        <Route path="/login-developer" exact component={Login} />
        <Route path="/register-developer" exact component={Register} />
        <Route path="/upload-game" exact component={GameUpload} />
        <Route path="/developer/settings" exact component={Settings} />
        <Route path="/tester/settings" exact component={TesterSettings} />
        <Route path="/single-game/:id" exact component={SingleGame} />
        <Route path="/forgotpassword" exact component={UserForgotPage} />
        <Route path="/admin-home" exact component={AdminHome} />
        <Route
          path="/developer/reset/:token"
          exact
          component={PasswordReset}
        />
        <Route path="/developer/settings/email" component={Email} />
        <Route path="/apply-tester" component={TesterApplication} />
        <Route path="/admin" exact component={AdminAuthentification} />
        <Route path="/review/:gameID" component={ReviewGame} />
        <Route path="/categories" component={GameCategories} />
      </Switch>
    </BrowserRouter>
  </Provider>
...