React Router 无法识别 Laravel 中的直接地址行更改

Question

我使用 React Router 和 Laravel。当我浏览 Link 元素时一切正常，但是当我更改浏览器地址行以手动显示另一个组件时，Laravel 显示它默认的 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;应用程序.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 对直接浏览器地址行更改做出反应？

Answer 1

因为您使用 SPA，所以您需要web.php像这样配置

Route::any('{all}', function () {

    return view('welcome');

})

->where('all', '^(?!api).*$')

->where('all', '^(?!storage).*$');

然后反应路由器将捕获所有路由

这里api和storageroutes被排除在catch之外，所以你可以使用存储文件和api来调用api