Question

我试图将我的Full Stack React应用程序部署到Heroku，但是无法加载应用程序的其他路由。

我的App.js

dataToPutInS3

server.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;

这里是site link

初始根页面可以正常加载，但是当我尝试直接从地址栏中访问/ login或/ signup路由时，它将无法正常工作

这里是Github Repository

的链接

对于我的问题，我也查看了其他Stack Overflow答案，但无济于事。

React Routing works in local machine but not Heroku React Router Routes Don't work when deployed to Heroku

这些解决方案建议我添加一个static.json并具有一个app.get（）方法，该方法将把任何路由重定向到我的index.html，因为它们是一个单页面应用程序。如果有人能引导我朝正确的方向前进，我将不胜感激！

Answer 1

您必须使用以下配置在根文件夹（static.json旁）中创建一个packages.json文件。

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

希望这对您有用！

React路由不适用于Heroku部署

1 个答案: