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

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


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

function App() {
            <Navbar />
                <route path='/' />

export default App; 


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

export default Navbar 

app.js (to compile)

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


    <html lang="{{ app()->getLocale() }}">
        <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() }}">
        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <div id="app"></div>
        <div id="menu"></div>
        <script src="{{ asset('js/app.js') }}"></script>

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.