404 同时用 laravel 刷新反应路线?

ofl*_*cad 0 laravel reactjs webpack

使用基于 React Laravel 的项目,我正在遵循一个教程,以了解两者如何相互作用。该应用程序包括制作一个简单的CRUD Application、具有三个路线的:

  • /家乡路线
  • /create创建项目路线
  • /{id}单一项目路线

我在调试与 相关的错误时遇到问题third route,详细说明localhost:8000/7将带来该项目id 7,并且在创建项目或从 访问它时它可以正常工作/,但是如果我想通过输入完整的 url 来访问它,例如localhost:8000/7,我是得到404 not found.

在此输入图像描述

我错过了一些东西,我无法弄清楚?

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"));
Run Code Online (Sandbox Code Playgroud)

网页.php:

<?php

Route::get('/', function () {
    return view('welcome');
});
Run Code Online (Sandbox Code Playgroud)

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');
Run Code Online (Sandbox Code Playgroud)

Jer*_*dev 5

用于 React 应用程序的包罗万象的路由应该在路由中web.php

Route::view('{path?}', 'app');
Run Code Online (Sandbox Code Playgroud)

您已将其添加到api.php路线中。但是,这些路由以 为前缀/api/。这就是为什么它在刷新时不起作用。

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