如何通過反應路由器使用 Laravel 路由

Question

我在我的 Laravel 項目中集成了 React。 我開始使用 react 路由器，但現在我想切換回 Laravel 路由。

是否可以像 Vue 一樣將我的 react 組件全局注入到我的刀片文件中？

為了設置 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();

Answer 1

目標容器不是 DOM 元素，因為在您的 HTML 中，您沒有div的 id 為app 。

你應該將你的 html 更改為layouts.app ：

<body>
    <div id="app" class="main">
        @section('content')
    </div>
    <script src="{{ asset('js/test.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

Answer 2

默認情況下，Laravel(6) 已經在使用id="app"所以在你的 react index.blade.php，即你定義你的 react 入口點的地方，使用不同的 id 名稱來防止 react App.js覆蓋你的普通 Laravel 文件IE：

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 路由。

Answer 3

把你的

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

在 web 路由的末尾，以便它最終加載以獲取您的所有視圖

如何通過反應路由器使用 Laravel 路由

問題描述

3 個解決方案

解決方案1
1 2019-01-07 21:06:55

解決方案2
1 2021-03-23 21:05:37

解決方案3
0 2020-08-28 09:38:22

如何通過反應路由器使用 Laravel 路由

問題描述

3 個解決方案

解決方案1 1 2019-01-07 21:06:55

解決方案2 1 2021-03-23 21:05:37

解決方案3 0 2020-08-28 09:38:22

解決方案1
1 2019-01-07 21:06:55

解決方案2
1 2021-03-23 21:05:37

解決方案3
0 2020-08-28 09:38:22