Почему не работают ссылки React в продакшн?

Question

[oskar barin]

Написал заметочник на React. Заметочник состоит из нескольких страниц. Для навигации использовал react-router v4.
Локально работает все замечательно. Но после того как сделал react build и выложил на сервер начались проблемы.
Если я перехожу по ссылке "/new-task", то она работает, но если я обновляю станицу то выводит сообщение "The requested URL /new-task was not found on this server."

Вот пример кода, как я записал роуты

mport React from "react";
import { Route, Switch } from "react-router-dom";

import Main from './Main';
import Admin from './Admin';
import NewTask from './NewTask';
import TestData from './TestData';
import ReviewTask from './ReviewTask';

function Routes() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={Main} />
          <Route path="/new-task" component={NewTask} />
          <Route path="/login-admin" component={NewTask} />
          <Route path="/admin" component={Admin} />
          <Route path="/test-data" component={TestData} />
          <Route path="/review-task" component={ReviewTask} />
        </Switch>
      </div>
    );
}

export default Routes;

Answer 1

[profesor08]

Перенаправляй все запросы на hostname.сom
nginx

location / {
  try_files $uri /index.html;
}

apache

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Comments

[Okitoff]

Спасибо

Answer 2

[nakree]

Потому что нужно настроить роутинг на сервере. Когда идет обращение типа hostname.сom/admin, то ресурс admin ищется на сервере, и он не существует, потому что ваши клиентские роуты существуют только в js, и доступны они только после того как загрузится html по адресу hostname.com, скачается и обработается js файл.

Comments

[Okitoff]

Так а как это сделать никто не может объяснить? Такой запрос даже не гуглится

[profesor08]

Okitoff, перенаправляй все запросы на hostname.сom