反应不更新DOM（Laravel）

Question

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

Answer 1

This may be an issue with hashHistory. Which react-router version are you using? With v4 and above, you need to use history like so -

import createHistory from 'history/createHashHistory'
const history = createHistory()
// pass history to the Router....

Answer 2

Your component didn't actually unmount/remount if you only update your hashtag in your url. The route however, is updated. So you can only see the component loads content for once when you refresh the page.

You will need to create state variables and update it in a routeChange handler callback and bind the updated state variable to your view by using setState. Then the component can get updated.

See this post for how to add the route change listener ( https://github.com/ReactTraining/react-router/issues/3554 )

Answer 3

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.