Компонент NotFound не отображается в скрипте сборки

Question

Мое приложение реакции хорошо работает на локальном хосте, и когда я пытаюсь получить доступ к URL-адресу, которого нет в моем приложении, приложение автоматически показывает мой компонент NotFound. Однако после сборки моего приложения (с помощью команды build-scripts) и размещения его на хостинге (я не использую страницы Github) мой компонент NotFound не отображается, при вводе неправильного URL-адреса отображается страница 404 Not Found по умолчанию.

index.js:

ReactDOM.render(
    <BrowserRouter><App /></BrowserRouter>, 
    document.getElementById('root')
)

app.js (рендер)

render() {
    return (
      <div className="app">
      <Switch>
        <Route
          exact
          path="/"
          render={() => (
            <div className="l">
              <div className="list-books-title">
                <h1>App</h1>
              </div>
              <div className="list-books-content">
                <BookShelf
                  title="Currently Reading"
                  books={this.state.currentlyReading}
                  handleChange={this.handleChange}
                />

                <BookShelf
                  title="Want to Read"
                  books={this.state.wantToRead}
                  handleChange={this.handleChange}
                />

                <BookShelf
                  title="Read"
                  books={this.state.read}
                  handleChange={this.handleChange}
                />
              </div>

              <div className="open-search">
                <Link to="/search"> Add a Book</Link>
              </div>
            </div>
          )}
        />

        <Route
          path="/search"
          render={() => (
            <Search
              searchQuery={this.state.query}
              updateQuery={this.updateQuery}
              searchedBooks={this.state.searchedBooks}
              handleChange={this.handleChange}
              filterChange={this.filterChange}
              allBooks={this.state.books}
            />
          )}
        />

        <Route render={() => (
          <NotFound />
          )}
        />
      </Switch>
      </div>
    );
  }

Answer 1

это наиболее вероятно, потому что ваш веб-сервер не настроен для одностраничных приложений. Вы должны указать, что ваш сервер всегда обслуживает index.html независимо от URL.

из https://www.sej -ko.dk / 2017/03/29 / маршрутизация приложения на одной странице в apache-with-htaccess /

Вы должны указать Apache переписать все на страницу index.html и позволить одностраничному приложению управлять маршрутизацией. Вы делаете это так:

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