javascript - 如何在反应路由器上使用 Laravel 路由
问题描述
我在我的 laravel 项目中集成了 React。我开始使用 react 路由器,但现在我想切换回 Laravel 路由。
是否可以像 Vue 一样在刀片文件中全局注入我的反应组件?
为了设置 React 路由,我使用了以下通配符:
Route::view('/{path?}', 'layouts.app');
当我尝试恢复正常的 laravel 路由时,出现以下错误
错误
未捕获的错误:目标容器不是 DOM 元素。
我的 web.php
Route::get('/', 'PageController@index');
控制器
class PageController extends Controller
{
public function index()
{
return view('layouts.index');
}
}
Layouts.app 文件
<body>
<div class="main">
@section('content')
</div>
<script src="{{ asset('js/test.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
索引刀片
@extends('layouts.app')
@section('content')
<Call> </Call>
@endsection
反应
应用程序.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Header from './Header'
import Call from './Call'
import Recipient from './Recipient';
import Avatar from './Avatar';
import registerServiceWorker from '../registerServiceWorker';
class App extends Component {
render () {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path='/' component={Call} />
<Route exact path='/rusthuis' component={Recipient} />
<Route exact path='/avatar' component={Avatar} />
</Switch>
</div>
</BrowserRouter>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
registerServiceWorker();
解决方案
默认情况下,Laravel(6) 已经id="app"
在你的 react index.blade.php 中使用了 so,即在你定义你的 react 入口点的地方,使用不同的 id 名称来防止 react App.js覆盖你的普通 Laravel 文件,即:
index.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- csrf token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- styles -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app-react"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
应用程序.js
import React from "react";
import { BrowserRouter as Router, Switch, } from "react-router-dom";
import Home from "./Home";
function App() {
return (
<React.Fragment>
<Navbar />
<Switch>
<Route exact path="/" component={Home}></Route>
<Route component={Default}></Route>
</Switch>
</React.Fragment>
);
}
export default App;
if (document.getElementById("app-react")) {
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("app-react")
);
}
使用以下路线
Route::get('/{path?}',function(){
return view('app');
});
{path?}
代表任何东西(单词)
第一级 URL 将影响反应,但更高级别,即
Route::view('/user/links','bladefile')
在我们的案例中,链接将是一条合法的 Laravel 路线。
推荐阅读
- javascript - 如何将 Google Drive 子文件夹 URL 导入到 Google Sheet
- sql - 无法在具有多个连接的烧瓶 ORM 中复制查询
- javascript - 使用 ES6 风格的导入构造一个数组
- python - 使用 Python 代码获取 Linux 服务信息(性能)
- xml - 如何在颤动中将XML字符串写入文件
- selenium - 如何捕获网络(XHR)?(硒 4)
- javascript - 如何对 html 表格进行排序,优先考虑数字并忽略字符串
- python - SP500 的 Pandas 数据框加入关闭
- html - 是否可以将输入元素高度设置为 0?
- blazor-server-side - 如何将主键从 Blazor 网格传递到对话框,以便我可以编辑记录(使用 SyncFusion 控件)