URL React Router не найден, если страница refre sh - Создать приложение React

Question

У меня есть приложение React с разными страницами (ROUTER). Я могу go перейти со страницы на другую, обновить sh страницу, и все прекрасно работает на локальном компьютере.

Если я развертываю приложение npm run built и загружаю его на свой хост infinityfree. net все время, когда я хочу обновить sh страницу или использовать прямую ссылку, я получаю ОШИБКУ 404.

Я пытался поймать все маршруты, но он не работает

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="container">
          <ul>
            <li><Link to="/">Main</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/SomethingElse">Something else</Link></li>
          </ul>
          <hr />
          <Switch>
            <Route exact path="/" component={Main} />
            <Route path="/about" component={About} />
            <Route path="/SomethingElse" component={SomethingElse} />
          </Switch>
        </div>
      </Router>
    );
  }
}

Есть советы? Спасибо!

Answer 1

Как только вы обновите sh страницу по другому маршруту, ваш http-сервер не сможет получить файл, соответствующий этому маршруту, так как он не существует

, поэтому вам придется перенаправить все маршруты к index.html, который является root вашего приложения

, поэтому, если вы используете apache, вы можете добавить .htaccess к root вашего проекта, и это его содержимое

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

Answer 2

Htaccess файл. Есть множество других вещей, которые нужно учитывать, но это мой htaccess конфиг сайтов:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
AddType x-httpd-php7 .php

Хотя полностью зависит от вашего сервера / развертывания!

Answer 3

Возможно, вы неправильно настроили свой хостинг.

При доступе к mypage.example.com/ сервер выдаст вам файл index.html, который показывает ваше приложение. Однако, если вы попытаетесь получить доступ к mypage.example.com/about, сервер попытается найти папку about и потерпит неудачу, сообщив об ошибке 404.

Что вам нужно сделать, это настроить сервер так, чтобы он всегда давал вам index.html если URL не является реальным файлом.

Вот как это можно сделать для Apache: { ссылка }

Answer 4

Это случилось со мной, когда я развернул свое приложение реагирования для netlify. Вам нужно включить файл с именем _redirects, который содержит следующую строку:

/* /index.html 200

Добавьте этот файл в папку сборки после запуска сценария развертывания, а затем загрузите его!

Answer 5

Вам нужно настроить хост так, чтобы он всегда оставлял маршрутизацию реагировать. Ищите X routing config for react, в зависимости от того, что вы используете X, может быть Apache, Nginx, что угодно.