Почему React выдаёт Not Found при обновлении страницы?

Question

[Jedi]

Доброе утро!

Подскажите пожалуйста, почему так получается и как я решить проблемку?

Использую React с Laravel, ошибку выдает Apache.

Вот мой код:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import App from './components/App';

if (document.getElementById('example')) {
    ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('example'));
}

App.js:

import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Tutorial from "./Tutorial";

const Sandwiches = () => <h2>Sandwiches</h2>;
const Tacos = () => <h2>Tacos</h2>;

class App extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li><Link to='/sandwiches'>Sandwiches</Link></li>
                    <li><Link to='/tacos'>Tacos</Link></li>
                    <li><Link to='/tutorials'>Tutorials</Link></li>
                </ul>

                <Switch>
                    <Route exact path='/sandwiches' component={Sandwiches} />
                    <Route exact path='/tacos' component={Tacos} />
                    <Route exact path='/tutorials' component={Tutorial} />
                </Switch>
            </div>
        );
    }
}

export default App;

Если использовать роутинг с начальной точки (localhost:8080/), то всё работает исправно. А если попытаюсь прописать следующий путь, например: localhost:8080/tacos, то вот...



И при обновлении страницы, тоже самое...

Дайте совет, пожалуйста.

Заранее спасибо!

Answer 1

[Mikhail Osher]

Гуглим "apache SPA configuration"

Answer 2

[Юрий]

Варианта два:
1) Вам надо добавить в Laravel-роуты маршрут, который будет по любому направлять на ваш фронт:

Route::get('/{path?}', [
    'uses' => 'ReactController@show',
    'as' => 'react',
    'where' => ['path' => '.*']
]);

И второй вариант - можете заиспользовать хэш-раутер:
import {HashRouter} from 'react-router-dom';
При этом в URL добавиться /#/.
Но зато у вас будет возможность навигации по конкретному урлу, а Laravel будет воспринимать это как один маршрут.

Comments

[Jedi]

Благодарю!