使用基于react laravel的项目进行工作,我正在关注一个教程,以了解两者如何相互作用。该应用程序包括制作一个简单的CRUD Application
以及以下三种路线:
/
本地路线/create
创建项目路线/{id}
单个项目路线我在调试与third route
相关的错误时遇到问题,详细说明localhost:8000/7
将使项目带有id 7
,并且在创建项目或访问项目时工作正常来自/
,但是,如果我想通过像localhost:8000/7
这样输入完整的URL来访问它,我会得到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"));
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');
答案 0 :(得分:1)
用于您的React应用程序的综合路由应位于web.php
路由中。
Route::view('{path?}', 'app');
您在api.php
路线中添加了此路线。但是,这些路由的前缀为/api/
。这就是为什么它无法刷新的原因。
请记住,尽管您应该始终将捕获所有路线作为最后一条路线加载。否则,其他路线可能不再起作用。