Маршруты с параметрами в реакции

Question

Я использую BrowserRouter и Routes с параметрами [xyz /: id], как показано ниже. На локальном хосте это работает нормально, но при развертывании на рабочей странице невозможно открыть xyz /: id. Пожалуйста, помогите решить. Я не хочу использовать HashRouter, поскольку у ha sh есть проблема, связанная с безопасностью на производстве.

Snippet :

Index. js

 <Router basename="/my-app">
    <App />
  </Router>,

Приложение. js

<Switch>
          <Route exact={true} path="/" component={Home} />
          <Route exact={true} path="/xyz/:id" component={MyPage} />
          <Route component={Invalid} />
        </Switch>

Answer 1

Вам нужно направить все запросы в ваш индекс. html файл. Например, если вы развертываете свое приложение на Apache веб-сервере, вы можете добавить файл .htaccess к root вашего сайта и написать в нем следующие строки кода:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L,QSA]