Reputation: 1270
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
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