Как исправить ошибку «404» при непосредственном доступе к компоненту в реакции - PullRequest
Новая
       21

Как исправить ошибку «404» при непосредственном доступе к компоненту в реакции

0 голосов
/ 22 мая 2019

Я переделываю свое портфолио в реакцию.Так довольно новый для этого.Проблема, с которой я здесь сталкиваюсь, заключается в том, что когда мой реагирующий проект размещен на сервере, все работает нормально, использует маршрутизацию, перемещает страницу вверх при навигации и т. Д., Но я заметил, что когда я закрываю свой веб-сайтвкладка и пытается напрямую получить доступ к компоненту.Например, если я делаю "http://mywebsite.com",, это работает. Но если я делаю" http://mywebsite.com/contact", страница переходит на 404, и да, компонент действительно существует.Любой подход хорошо работает в локальном хосте, но не на размещенном сервере (Hostinger)

Я попытался выполнить поиск в Интернете, но не смог найти надежных ответов, во многих публикациях в StackOverflow говорится об ошибке, связанной с сервером, ноне показывает как это исправить.

URL-адреса React-маршрутизатора не работают при обновлении или записи вручную

Как исправить ошибку 404, не найденную при доступе к маршрутам в URL-адресе.(СПА РЕАКТ)

act-router-dom Build Предоставление 404 при непосредственном доступе к URL, но не в разработке

Таковы мои навигационные ссылки и маршрутsetup - 

class mainContent extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <nav id="navbar">
            <span>
              <NavLink exact to="/">
                PRASHANTH KUMAR SRIPATHI
              </NavLink>
            </span>

            <li-item>
              <NavLink to="/contact" id="nav-item" className="item">
                <i className="fa fa-comments-o" /> Contact
              </NavLink>
            </li-item>
            <li-item>
              <NavLink to="/resume" id="nav-item" className="item">
                <i className="book icon" /> Resume
              </NavLink>
            </li-item>
            <li-item>
              <NavLink to="/portfolio" id="nav-item" className="item">
                <i className="list alternate icon" /> Portfolio
              </NavLink>
            </li-item>
            <li-item>
              <NavLink exact to="/" id="nav-item" className="item">
                <i className="home icon" /> Home
              </NavLink>
            </li-item>

            {/*<li-item>
              <NavLink to="/about/" className="item">
                <i className="address card icon" /> About
              </NavLink>
            </li-item> */}
          </nav>

          <div className="content" id="main">
            <Switch>
              <Route exact path="/" component={home} />
              <Route path="/contact" component={contactMe} />
              <Route path="/resume" component={resume} />
              <Route path="/portfolio" component={portfolio} />
              {/*<Route path="/about" component={about} />*/}
            </Switch>
          </div>
          <div className="footer">
            <footer className="relative">
              &copy; 2019 - Prashanth Kumar Sripathi
            </footer>
          </div>
        </div>
      </Router>
    );
  }
}

Как я могу исправить это, чтобы оно не показывало 404. Я не хочу исправлять это так, чтобы оно перенаправлялось на "http://mywebsite.com", потому что если ядолжны были создать еще один сайт, содержащий фрагменты кода, которыми я должен поделиться, который просто перенаправил бы его на страницу индекса.

Ответы [ 2 ]

1 голос
/ 22 мая 2019

TL; DR Это проблема с сервером, а не проблема с внешним интерфейсом.

Чтобы ответить на ваше беспокойство по поводу рендеринга маршрута 404.

Способ настройки SPA заключается в том, что вы создаете свои маршруты в коде внешнего интерфейса с помощью React Router в своем примере и позволяете этой библиотеке позаботиться о ваших потребностях в маршрутизации.

Когда запрос сервера идет на определенную страницу, например /contact, сервер попытается найти файл index.html (в общем случае ИЛИ эквивалентный в зависимости от настроек вашего сервера) внутри каталога contact, и, поскольку он не нашел такого пути или файл будет возвращать 404.

Обходной путь для этого заключается в том, что вы должны отправлять / перенаправлять все запросы по определенным маршрутам в ваш SPA на главную страницу индекса, а затем позволить основному приложению (веб-интерфейсу) позаботиться об этом после его загрузки.

Вот соответствующие документы React, которые именно то, что вы ищете: https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing

Возможное решение зависит от настроек вашего сервера, но в целом:

Для Node / Express вы можете использовать следующий код 

app.get('*', function (req, res) {
  res.send('index_path')
})

Netlify: https://www.netlify.com/docs/redirects/

Больше вариантов, включая Github Pages, Heroku, Firebase, PHP, Ruby on Rails, .Net, Flask и т. Д., Можно найти здесь:

1 голос
/ 22 мая 2019

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

http://mywebsite.com/contact

Вместо

http://mywebsite.com/contactme

...