Блог

Я использую React Router и Laravel. Когда я перемещаюсь по элементам ссылок, все в порядке, но когда я меняю адресную строку браузера, чтобы вручную отобразить другой компонент, Laravel показывает, что это defalt 404 страница.

Это значение по умолчанию web.php содержание, в welcome.blade.php Я включаю js/app.js файл:

 Route::get('/', function () {
   return view('welcome');
});
  

Это мой App.js содержание:

 
import React from 'react';
import { Switch, Route } from "react-router-dom";
import Signin from "../../containers/Signin";
import Signup from "../../containers/Signup";
import Error from "../../containers/Error";
import Courses from "../../containers/Courses";
import Course from "../../containers/Course";
import Quiz from "../../containers/Quiz";
import Header from "../Header";
import "./App.css";
import Library from "../../containers/Library";
import QuizResults from "../../containers/QuizResults";
import Main from "../Main";
import StudentsList from "../../containers/StudentsList";


function App()
{
  return (
    <div className="App">

      <Header isLogged={false}/>

      <Switch>

        <Route exact path='/' component={Signin} />
        <Route path='/signup' component={Signup} />


        <Main>
          <Route path='/courses' component={Courses} />
          <Route path='/course/:id' component={Course} exact/>
          <Route path='/quiz' component={Quiz} />
          <Route path='/library' component={Library} />
          <Route path='/quiz-results' component={QuizResults} />
          <Route path='/students' component={StudentsList} />
        </Main>

        <Route component={Error} />

      </Switch>

    </div>
  );
}

export default App;


  

app.js:

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


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

  

Итак, как заставить React Router реагировать на прямое изменение адресной строки браузера?

поскольку вы работаете с SPA, вам нужно настроить web.php его следующим образом

 Route::any('{all}', function () {
    return view('welcome');
})
->where('all', '^(?!api).*$')
->where('all', '^(?!storage).*$');
  

тогда маршрутизатор react будет перехватывать все маршруты

и здесь api и storage маршруты исключаются из catch, поэтому вы можете использовать файлы хранилища и api для выполнения вызова api