#reactjs #heroku
Вопрос:
Итак, все мои компоненты отображаются локально, но после перехода на Heroku отображается только компонент домашней страницы. Я обновил все пакеты npm, и все выглядит правильно, поэтому я не понимаю, почему на всех страницах компонентов отображается «Не найдено» в производстве. Кто-нибудь может, пожалуйста, помочь мне с этим?
Вот мой код:
package.json file: { "name": "app", "version": "1.0.0", "description": "app", "main": "index.js", "type": "module", "engines": { "node": "v14.16.0", "npm": "7.21.0" }, "scripts": { "start": "node backend/server.js", "server": "nodemon backend/server.js", "client": "npm start --prefix frontend", "dev": "concurrently "npm run server" "npm run client"", "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend amp;amp; npm run build --prefix frontend" }, "author": "me", "license": "MIT", "dependencies": { "colors": "^1.4.0", "core-js": "3.3", "dotenv": "^10.0.0", "express": "^4.17.1", "if-env": "^1.0.4" }, "devDependencies": { "concurrently": "^6.4.0", "nodemon": "^2.0.15" } } App.js: import React, { useEffect, useState } from 'react' import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import { Image } from 'react-bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' import './App.css' import Home from './components/Home/Home' import About from './components/About/About' // import Connect from './components/Connect/Connect'; import Events from './components/Events/Events' import Giving from './components/Giving/Giving' import WatchLive from './components/WatchLive/WatchLive' import NavTabs from './components/NavTabs/NavTabs' import Staff from './components/Staff/Staff' import lightHeader from './assets/logo-assets/logo-3trees.png' import darkHeader from './assets/logo-assets/logo-3trees-dark.png' function App() { const [src, setSrc] = useState() const [linkColor, setLinkColor] = useState() const [navColor, setNavColor] = useState() const lightLinkColor = 'white' const darkLinkColor = '#666666' const lightNavColor = 'white' const darkNavColor = 'black' useEffect(() =gt; { if (window.location.pathname === '/watchlive') { document.body.style.setProperty('background-color', 'black') setLinkColor(lightLinkColor) setNavColor(darkNavColor) setSrc(darkHeader) } else { document.body.style.setProperty('background-color', 'white') setLinkColor(darkLinkColor) setNavColor(lightNavColor) setSrc(lightHeader) } }, []) return ( lt;Routergt; lt;divgt; lt;Image src={src} id='light-header' /gt; lt;NavTabs linkColor={linkColor} navColor={navColor} /gt; lt;Routesgt; lt;Route path='/' element={lt;Home /gt;} /gt; lt;Route path='/about' element={lt;About /gt;} /gt; lt;Route path='/events' element={lt;Events /gt;} /gt; lt;Route path='/watchlive' element={lt;WatchLive /gt;} /gt; lt;Route path='/giving' element={lt;Giving /gt;} /gt; lt;Route path='/staff' element={lt;Staff /gt;} /gt; lt;/Routesgt; lt;/divgt; lt;/Routergt; ) } export default App