404 возвращается по любому URL-адресу, доступному до доступа к домашнему URL-адресу - PullRequest
Новая
       6

404 возвращается по любому URL-адресу, доступному до доступа к домашнему URL-адресу

0 голосов
/ 27 октября 2018

Я использую React-Router для своего приложения. Когда я развернул его на сервере, я заметил, что если я запросил какой-либо URL-адрес перед открытием домашнего URL-адреса, он вернет 404. Затем после доступа к домашнему URL-адресу все остальные URL-адреса будутотлично работает!

index.tsx: 

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

App.tsx: 

public render()
  {
    return(
        <div className="App">
            <div className="row margin-auto">
                <Header/>
                <Main/>
            </div>
        </div>
    )
  }

Main.tsx: 

public render()
    {
        return (
            <div id="main" className="col col-9-and-half no-padding-h vh-100">
                <div className="container-fluid no-padding-h">
                    <main>
                        <Switch>
                            <Route path='/home' component={Home} />
                            <Route exact={true} path='/' component={Home} />
                            <Route path="/matches" component={Matches} />
                            <Route path='/login' component={Login} />
                            <Route path='/sign-up' component={SignUp} />
                            <Route path='/contact-us' component={ContactUs} />
                        </Switch>
                    </main>
                </div>
            </div>
        )
    }

например, когда я пытаюсь открыть www.mywebsite.com/sign-up, он возвращает 404, но если я сначала открыл www.mywebsite.com, то попыталсячтобы получить доступ к www.mywebsite.com/sign-up, он будет работать нормально.

Ответы [ 2 ]

0 голосов
/ 27 октября 2018

Спасибо Сет & Уильям Чоу за подсказку к ответу, я сделал следующие конфиги htaccess для обработки запросов, и теперь все работает нормально: 

<ifModule mod_rewrite.c>
    RewriteEngine On

    RewriteBase /

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

    RewriteRule . /index.html [L]
</ifModule>
0 голосов
/ 27 октября 2018

Похоже, у вас нет настройки перенаправления на вашем сервере. Для работы одностраничного приложения JavaScript вы должны убедиться, что ваш сервер обслуживает ваш index.html для всех путей.

Следует отметить, что вам придется управлять обработкой 404 в пределах react-router. Это может быть достигнуто путем добавления <Route /> без path проп в конце ваших определений маршрута. Важно, чтобы он был в конце, чтобы все возможности маршрута были исчерпаны до отображения 404 

<Switch>
  <Route path='/home' component={Home} />
  <Route exact={true} path='/' component={Home} />
  <Route path="/matches" component={Matches} />
  <Route path='/login' component={Login} />
  <Route path='/sign-up' component={SignUp} />
  <Route path='/contact-us' component={ContactUs} />
  <Route component={NotFound} />
</Switch>
...