React Router无法识别laravel中的直接地址线更改 [英] React Router does not recognize direct address line changing in laravel

问题描述

我使用React Router和Laravel.当我浏览所有链接元素时，一切正常，但是当我更改浏览器地址行以手动显示另一个组件时，Laravel会显示它的默认404页面.

I use React Router and Laravel. When I navigate throught Link elements all OK, but when I change browser address line to manually show another component Laravel shows it defalt 404 page.

这是默认的web.php内容，在welcome.blade.php中，我包含js/app.js文件:

This is default web.php content, in welcome.blade.php I inlcude js/app.js file:

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

这是我的App.js内容:

This is my App.js content:

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对直接浏览器地址行更改做出反应?

So, how to force React Router react on direct browser address line change?

推荐答案

，因此您需要像这样配置 web.php

as your working with SPA so you need to configure your web.php like this

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

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

then react router will catch all routes

此处的 api 和 storage 路由不包含在捕获中，因此您可以使用存储文件和api来调用api

and here api and storage routes is exclude from catch so you can use storage files and api to make call api

这篇关于React Router无法识别laravel中的直接地址线更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！