React not updating the DOM (Laravel)

php_nub_qq

I have set up a basic react app with hash navigation. Problem is when I click on any link to navigate between pages, I see that the hash in the url is changing properly, as well as I added a console.log in my layour's render to see if it's getting called and it is, with proper this.props.children values, however the page is not rendering anything. If I go to any route and refresh the page I see the correct components rendered, but if I navigate somewhere from there noting gets rendered until I refresh again.

import React from "react";
import ReactDOM from "react-dom";
import { IndexRoute, Router, Route, Link, hashHistory as history } from 'react-router';

class Layout extends React.Component {

  render() {
    console.log(this.props, document.location.hash);

    return <div>
      <div>
        <span>LEYAUTI MLEAYTI {Math.random()}</span>
      </div>
      <div>
        {this.props.children}
      </div>
      <div>
        {this.props.params.project}
      </div>
    </div>
  }
}

class CreateProject extends React.Component {

  render() {
    return <div>
      <h1>Create PROEKT</h1>
    </div>
  }
}

class Projects extends React.Component {

  render() {
    return <div>
      <h1>PROEKTI MROEKTI</h1>
      <Link to="/projects/create">New project</Link>
    </div>
  }
}

ReactDOM.render(
    <Router history={history}>
      <Route path="/" component={Layout}>
        <IndexRoute component={Projects}/>
        <Route path="projects/create" component={CreateProject}/>
      </Route>
    </Router>,
    document.getElementById('app-root'));

Here is a visual of what's happening in the console when I navigate on a couple routes, but the DOM remains unchanged

enter image description here

php_nub_qq

Alright, so I got down to the bottom of it.

The problem was that I was including my client.min.js file before the default app.js file of laravel 5.4's default layout. For some reason it broke react in a very weird way. What I had to do is switch the order in which the two files were included.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

The DOM is not updating after my post request with axios in React although the state is updated

React-router-dom changing URL but not updating content of styled-component's ThemeProvider

VueJS DOM not updating in component

Angular dom not updating on changes

Laravel + Vue + Axios: DOM not updating from within Axios call, even though 'this' DOES update

React test onchange dom not updating?

react-router-dom <Link> Not Updating Page

react router dom is not updating class component when url change

React DOM not updating on state change

React Dom not updating after updating a state array

Why is this knockout array not updating in the DOM?

Updating DOM images array with ajax

AngularJS - Why is the DOM not updating

jquery .text() updating "source" but not the DOM

Updating div with jQuery not showing on DOM

DOM not updating

Vuejs DOM Not Updating

Updating DOM for everyone when database changes - MongoDB, Ajax, Express,React

setState is not updating DOM

React DOM not updating even though the state and props have

mocha-webpack - dom is not updating

Since updating react-dom and react-router-dom packages: excessive li onClick behavior

React class component inside react hook - DOM not updating

DOM not updating in Jasmine

React - Method not updating DOM

React/Typescript conditional routing - Updating from React Router Dom v5 to v6

React Functional Component is not updating DOM when State Changes

React, timed loop updating DOM at once instead of updating in increments

React UI/dom is not updating after data insertion in json-server