404同时刷新与laravel的反应路线?

时间:2019-06-17 13:18:06

标签: reactjs laravel webpack

使用基于react laravel的项目进行工作,我正在关注一个教程,以了解两者如何相互作用。该应用程序包括制作一个简单的CRUD Application以及以下三种路线:

  • /本地路线
  • /create创建项目路线
  • /{id}单个项目路线

我在调试与third route相关的错误时遇到问题,详细说明localhost:8000/7将使项目带有id 7,并且在创建项目或访问项目时工作正常来自/,但是,如果我想通过像localhost:8000/7这样输入完整的URL来访问它,我会得到404 not found

enter image description here

我丢失了一些东西,我无法弄清楚?????

App.js

 import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Header from "./Header";
import ProjectsList from "./ProjectsList";
import NewProject from './NewProjects';
import SingleProject from "./SingleProject";
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from '../reducers/index';
const store = createStore(reducer)
class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <BrowserRouter>
                    <div>
                    <Header />
                        <Switch>
                            <Route exact path="/" component={ProjectsList} />
                            <Route path="/create" component={NewProject} />
                            <Route path="/:id" component={SingleProject} />
                        </Switch>
                    </div>
                </BrowserRouter>
            </Provider>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("app"));

web.php:

<?php

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

api.php:

<?php

use Illuminate\Http\Request;



Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('projects', 'ProjectController@index');
Route::post('projects', 'ProjectController@store');
Route::get('projects/{id}', 'ProjectController@show');
Route::put('projects/{project}', 'ProjectController@markAsCompleted');
Route::post('tasks', 'TaskController@store');
Route::put('tasks/{task}', 'TaskController@markAsCompleted');
Route::view('/{path?}', 'app');

1 个答案:

答案 0 :(得分:1)

用于您的React应用程序的综合路由应位于web.php路由中。

Route::view('{path?}', 'app');

您在api.php路线中添加了此路线。但是,这些路由的前缀为/api/。这就是为什么它无法刷新的原因。

请记住,尽管您应该始终将捕获所有路线作为最后一条路线加载。否则,其他路线可能不再起作用。