如何在 laravel 和 Admin Lte 中使用 React Routes？答案

【问题标题】：How to use React Routes with laravel and Admin Lte?如何在 laravel 和 Admin Lte 中使用 React Routes？
【发布时间】：2020-12-14 19:27:48
【问题描述】：

我正在尝试构建一个 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"));
}

【问题讨论】：

javascript 是客户端语言，php (laravel) 是服务器端。它们是两种不同的东西
我知道这个 js 文件是 JSX 文件它们是反应组件

标签： javascript php reactjs laravel react-router

【解决方案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 install admin-lte react-router-dom 然后 require("admin-lte");在你的 bootstrap.js 文件中。

【讨论】：

非常感谢我以前有这个想法但是当我用 JSX 构建整个页面时我遇到了一个问题我不知道如何使用注销或获取刀片文件的主要功能所以我尝试在刀片文件中使用导航栏，然后在 JSX 中使用侧边栏和主要部分，所以任何建议我该如何构建它，因为根据您的想法，它必须全部在 JSX 文件中......
您首先需要设置某种类型的身份验证，我推荐 Laravel Sanctum SPA 身份验证laravel.com/docs/8.x/sanctum#spa-authentication。该软件包是为 SPA 创建的，可满足您的需求。我还建议您检查以下任一链接，以便为您的应用程序youtube.com/watch?v=uPKd3q-iaVs / youtube.com/watch?v=8Uwn5M6WTe0 设置一种非常简单的身份验证方法。
非常感谢您的建议，我会努力解决的。