@PHPjedi

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

Доброе утро!

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

Использую 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, то вот...

5bfe18d69f657012479732.png

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

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

Заранее спасибо!
  • Вопрос задан
  • 305 просмотров
Решения вопроса 2
miraage
@miraage
Старый прогер
Гуглим "apache SPA configuration"
Ответ написан
Комментировать
modestguy
@modestguy
full-stack web developer
Варианта два:
1) Вам надо добавить в Laravel-роуты маршрут, который будет по любому направлять на ваш фронт:
Route::get('/{path?}', [
    'uses' => 'ReactController@show',
    'as' => 'react',
    'where' => ['path' => '.*']
]);


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы