Показывать страницу при доступе напрямую через URL React Router

Question

Я создал приложение, у которого нет сервера. Он просто извлекает данные с нескольких конечных точек. Когда кто-то пытается получить доступ к странице, которая не является URL-адресом root, они получают сообщение Page not found. Мне не удалось найти решение, не связанное с написанием сервера. Я действительно надеюсь, что смогу избежать этого, потому что приложение действительно слишком простое, чтобы в нем нуждаться.

Когда я перехожу к http://url.com/nextPage, он возвращает Page not found, но если я перейду туда из root http://url.com/ У меня нет проблем.

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

Мой App.tsx файл. Обе страницы просто написаны на React.

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route
        path='/'
        exact
        component={HomePage}
      />
      <Route
        path='/nextPage'
        component={NextPage}
      />
    </Router>
  )
}

Answer 1

Поскольку теперь я знаю, что вы используете Netlify в качестве хостинг-провайдера, есть способ сделать это, не имея собственного сервера. Netlify имеет множество конфигураций, одна из которых - redirects.

. Вы можете попробовать добавить в свой Netlify.toml следующее:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Или вы можете создать _redirects файл со следующим содержанием:

/* /index.html

Взгляните на эту документацию: https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/