how to render react router in Laravel


I am sure this has been asked before but I haven’t found the answer when browsing here or google.

I am following this guide to do a react-router-dom based menu in Laravel -> https://laravel-reactjs.com/react-sidebar-navigation-menu-tutorial-beginner-react-js-project-using-hooks-router/

I understand the guide, and are also aware of that Switch has been replaced with routes in newer version of react-router.

My question is how render the navigation in my blade file. I have tried multiple ways of render, ReactDom.render and appending to elements.. I can’t get it to work.

My code is

routepath.js

import ReactDom from 'react';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";

function App() {
    return(
        <Router>
            <Navbar />
            <routes>
                <route path='/' />
            </routes>
        </Router>
    );
}

export default App; 

navbar.js

import * as FaIcons from "react-icons/fa";
import { Link } from 'react-router-dom';

function Navbar() {
    return (
        <div className="navbar">
            <link to="#" className="menu-bars">
                <FaIcons.FaBars />
                Menu
            </link>
        </div>
    )
}

export default Navbar 

app.js (to compile)


require("./components/main"); //FullCalendar
require("./RoutePath"); 

app.blade.php

    <html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Tasksman</title>
        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        <div id="app"></div>
        <div id="menu"></div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
    </html>

My file structure is

- js  
    - Components   
        - Navbar.js  
    - pages  
        - Home.js 
        - Products.js 
        - Reports.js
    - app.js
    - RoutePath.js
- views
    - app.blade.php

Source: React – Stack Overflow

November 23, 2021
Category : News
Tags: laravel | react-router | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.