CODEWITHSUNDEEP
javascriptphpreactjslaravelreact-router
Peshraw Hasan
Peshraw Hasan

Reputation: 1270

How to use React Routes with laravel and Admin Lte?

I'm trying to build a crud application and I want to use react-routes with laravel and AdminLte because when i visit the pages no refresh needed but I have some problem.. -I want to use react-router links in the AdminLte side bar and I created a side bar blade file just like that <div id="sidebar"></div> and include it in my admin.blade.php like that

    <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>

after that i created a javascript file for the side bar and using react routes link there.

with that i have a home.blade.php file

@extends('layouts.admin')

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

and I created a javascript file also for the home. as you see I used AdminLte and what I'm trying to do is when I click the links in the side bar I want to change the component in the home screen but because they are in deferrent blade files I can't.

I implement the main js file like this

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

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

Upvotes: 1

Views: 1398

Answers (1)

Perry
Perry

Reputation: 72

You should have one blade file (app.blade.php) and place the root of your React application in the body like so:

<!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>

Then within your app.js file you should paste the Admin-LTE code of your choice, inside the BrowserRouter component like so: like so:

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>

Instead of using a normal a href for a link, you should use the Link component provided by react-router-dom, like so:

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

Then wherever your main content is on the page, which you want to change without refreshing, you need to place in a Switch component. With the relevant routes inside, like so:

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

Don't forget to npm install admin-lte react-router-dom and then require("admin-lte"); in your bootstrap.js file.

Upvotes: 1

Related Questions