Я пытаюсь развернуть свое приложение Full Stack React в Heroku, но не могу загрузить другие маршруты своего приложения.
My App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// Pages
// =================
// Not Logged In
import SplashPage from './Pages/SplashPage';
import Login from './Pages/Login';
import Signup from './Pages/Signup';
import CohortSignup from './Pages/CohortSignup';
// Logged In
import AdminHome from './Pages/AdminHome';
import InstructorHome from './Pages/InstructorHome';
import StudentHome from './Pages/StudentHome';
import Settings from './Pages/Settings';
import StudentProfile from './Components/StudentProfile';
// No Page
import NoPage from './Pages/NoPage';
// Components
import Navbar from './Components/Navbar';
// Utils
import API from './Utils/API';
class App extends Component {
state = {
// We want to change this state based on User Login Credentials
user: '',
userType: '',
loggedIn: false
}
// class functions go here
render() {
// If the user state login is true, allow them to navigate these pages
if (this.state.loggedIn === true) {
return (
<Router>
<Navbar user={this.state.user} logout={this.logout} />
<Switch>
{this.state.userType === 'administrator' ? <Route path='/' exact component={() => <AdminHome user={this.state.user} />} /> : ''}
{this.state.userType === 'instructor' ? <Route path='/' exact component={() => <InstructorHome user={this.state.user} />} /> : ''}
{/* Path for student profile based on it */}
<Route exact path='/student/:id' exact component={StudentProfile} />
{this.state.userType === 'student' ? <Route path='/' exact component={() => <StudentHome user={this.state.user} />} /> : ''}
<Route exact path='/settings' exact component={() => <Settings user={this.state.user} />} />
<Route component={NoPage} />
</Switch>
</Router>
)
} else {
return (
<Router>
<Switch>
<Route exact path='/' exact component={SplashPage} />
<Route exact path='/login' exact component={Login} />
<Route exact path='/signup' exact component={Signup} />
{/* Go to signup based on cohortID */}
<Route exact path='/signup/:id' exact component={CohortSignup} />
<Route component={NoPage} />
</Switch>
</Router>
)
}
}
}
export default App;
server.js
// Allows us to place keys and sensitive info in hidden .env file
require("dotenv").config();
// Require Packages
const express = require("express");
const app = express();
const db = require("./models");
const routes = require("./routes");
const passport = require("passport");
const session = require("express-session")
const path = require("path");
const MySQLStore = require("express-mysql-session")(session);
require("./config/passport")(passport)
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
let options = {};
if (process.env.NODE_ENV === 'production') {
app.use(express.static("client/build"))
options = {
host: process.env.HOST,
port: 3306,
user: process.env.USER,
password: process.env.PASSWORD,
database: process.env.DB
}
} else {
options = {
host: 'localhost',
port: 3306,
user: 'root',
password: process.env.DB_PASSWORD,
database: 'tracker'
}
}
// Options for mysql session store
let sessionStore = new MySQLStore(options);
// Pass in mysql session store
app.use(session({
key: 'surfing_dogs',
secret: 'surfing_dogs',
store: sessionStore,
resave: false,
saveUninitialized: false
}))
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(__dirname));
// app.use(express.static(path.join(__dirname, 'build')));
app.use(routes)
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
// res.sendFile(path.resolve(__dirname + '/client/build/index.html'));
});
db.sequelize.sync({ force: false }).then(() => {
let server = app.listen(process.env.PORT || 5000, function () {
let port = server.address().port;
console.log(`Server is listening on PORT ${port}`)
})
})
Вот ссылка на сайт
Исходнаякорневая страница загружается нормально, но когда я пытаюсь получить доступ к маршруту / login или / signup напрямую из адресной строки, он не работает
Вот ссылка на Github Repository
Я также посмотрел другие ответы на переполнение стека для моей проблемы, но безрезультатно.
Реактивная маршрутизация работает на локальном компьютере, но не в Heroku Маршруты маршрутизатора React не работаютпри развертывании в Heroku
Решения, приведенные в этих решениях, предполагают, что я добавляю static.json и имею метод app.get (), который перенаправляет любой маршрут в мой index.html из-за того, что реагирует как единое целое. страница приложения. Если бы кто-нибудь мог направить меня в правильном направлении, я был бы признателен!