Heroku с React-Router и Create-React-App

Question

Этот вопрос задавался несколько раз, я читал подобные вопросы и безуспешно пытался решить эту проблему, поэтому я публикую свой код, чтобы посмотреть, поможет ли новая пара глаз решить мою проблему.

Мое приложение работает в Heroku, как и ожидалось, однако при обновлении страницы или переходе непосредственно к маршруту, который не является домашней страницей (пример myapp.com/wh независимо).Я получаю 404. Не найдено.

Моя маршрутизация работает локально, поэтому я знаю, что это связано с настройками моего приложения и Heroku.У меня есть приложение MERN с клиентом create-реакции-app и серверным сервером Express

Папка Stucture

client/
server/
package.json
static.json

static.json

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

Router.js

<BrowserRouter basename="/">
    <Fragment>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route extact path="/login" component={Login} />
            <PrivateRoute path="/dashboard" component={Dashboard} />
        </Switch>
    </Fragment>
</BrowserRouter>

Server.js

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'))

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

Кто-нибудь видит все, что мне не хватает

Answer 1

Я тоже много времени потратил на эту проблему.Если я правильно помню, вам нужно создать новое свойство в вашем файле package.json, которое называется "homepage".Вы можете поместить его последним внутри объекта в вашем package.json.Значением этого свойства будет ваш URL, на котором вы размещаете свое приложение.Так что для моего примера это было:

{
  "name": "react_movie_db_course",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-fontawesome": "^1.6.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
   "homepage" : "http://www.weibenfalk.com/react_rmdb/"
}

Не думайте, что вам нужно базовое имя для вашего компонента, если вы не начинаете с подпапки.

Возможно, вам даже придется отредактировать файл .htaccess на сервере.Вот так выглядит мой файл .htaccess.

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# Fallback all other routes to index.html
RewriteRule ^ /react_rmdb/index.html [L]

Я также знаю, что прошло около 24 часов, чтобы маршрутизация начала корректно работать на сервере.