时间戳

首页 > 解决方案 > 如何在 laravel 和 Admin Lte 中使用 React Routes？

javascript - 如何在 laravel 和 Admin Lte 中使用 React Routes？

问题描述

我正在尝试构建一个 crud 应用程序，我想将 react-routes 与 laravel 和 AdminLte 一起使用，因为当我访问页面时不需要刷新但我有一些问题.. -我想在 AdminLte 端使用 react-router 链接bar，我像这样创建了一个侧栏刀片文件， <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"));
}

标签： javascriptphpreactjslaravelreact-router

解决方案

你应该有一个刀片文件 (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 install admin-lte react-router-dom 然后 require("admin-lte"); 在您的 bootstrap.js 文件中。

推荐阅读