如何將 React Routes 與 laravel 和 Admin Lte 一起使用？

Question

我正在嘗試構建一個 crud 應用程序，我想將 react-routes 與 laravel 和 AdminLte 一起使用，因為當我訪問頁面時不需要刷新但我有一些問題.. -我想在 AdminLte 側欄中使用 react-router 鏈接和我像<div id="sidebar"></div>一樣創建了一個側邊欄刀片文件，並將其包含在我的 admin.blade.php 中

    <div class="wrapper">
        @include('layouts.partials.nav')
        @include('layouts.partials.sidebar')

        <div class="content-wrapper">
            <section class="content-header">
              <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                      <h1>@yield('content-header')</h1>
                    </div>
                    <div class="col-sm-6 text-right">
                      @yield('content-actions')
                    </div>
                  </div>
              </div>
            </section>

            <section class="content">
                @yield('content')
              </section>
        </div>


          <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
          </aside>

    </div>

    <script src="{{ asset('js/app.js') }}"></script>
    @yield('js')
</body>

之后，我為側邊欄創建了一個 javascript 文件，並在那里使用反應路由鏈接。

我有一個 home.blade.php 文件

@extends('layouts.admin')

@section('content')
<div id="home">
</div>
@endsection

我也為家庭創建了一個 javascript 文件。 如您所見，我使用了AdminLte，而我想要做的是當我單擊側欄中的鏈接時，我想更改主屏幕中的組件，但是因為它們位於延遲刀片文件中，所以我不能。

我像這樣實現主js文件

if (document.getElementById("sidebar")) {
    ReactDOM.render(<SIDE />, document.getElementById("sidebar"));
}

if (document.getElementById("home")) {
    ReactDOM.render(<INDEX />, document.getElementById("home"));
}

Answer 1

你應該有一個刀片文件 (app.blade.php) 並將你的 React 應用程序的根放在正文中，如下所示：

<!DOCTYPE html>
<html lang="en">

 <head>
    <title> Example </title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="/css/app.css">
 </head>

 <!-- Root of your React application -->
 <div id="root"></div>

 <!-- Scripts -->
 <script src="{{ asset('js/app.js') }}" defer></script>
 </html>

然后在您的 app.js 文件中，您應該將您選擇的 Admin-LTE 代碼粘貼到 BrowserRouter 組件中，如下所示：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";

function App() {

return (
    <BrowserRouter>
       {/* Place your Admin-LTE HTML theme code here */}
    </BrowserRouter>

您應該使用 react-router-dom 提供的 Link 組件，而不是使用普通的 a href 作為鏈接，如下所示：

<div className="image">
   <Link to="/home">
      Home
   </Link>
</div>

然后，無論您的主要內容在頁面上的哪個位置，如果您想在不刷新的情況下進行更改，您都需要放置在 Switch 組件中。 里面有相關的路線，像這樣：

<main className="py-4">
   <Switch>
      <Route path="/home">
         <Home />
      </Route>
   </Switch>
</main>

不要忘記 npm 安裝 admin-lte react-router-dom 然后 require("admin-lte"); 在您的 bootstrap.js 文件中。

如何將 React Routes 與 laravel 和 Admin Lte 一起使用？

問題描述

1 個解決方案

解決方案1
0 已采納 2020-12-15 09:19:26

如何將 React Routes 與 laravel 和 Admin Lte 一起使用？

問題描述

1 個解決方案

解決方案1 0 已采納 2020-12-15 09:19:26

解決方案1
0 已采納 2020-12-15 09:19:26