反应不更新DOM（Laravel）

Question

我已经设置了一个带哈希导航的基本反应应用程序。问题是，当我点击任何链接以在页面之间导航时，我发现网址中的哈希值正在发生变化，我在我的问题console.log中添加了render以查看如果它被调用，并且具有正确的this.props.children值，则页面不会呈现任何内容。如果我去任何路线并刷新页面，我会看到正确的组件渲染，但如果我从那里导航到某处，则会在我再次刷新之前进行渲染。

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'));

以下是我在几条路线上导航时控制台中发生的事情的视觉效果，但DOM保持不变

Answer 1

这可能是hashHistory的问题。您使用哪个react-router版本？使用v4及更高版本，您需要使用这样的历史记录 -

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

Answer 2

如果您只更新网址中的主题标签，则您的组件实际上并未卸载/重新安装。然而，路线已更新。因此，您只能在刷新页面时看到组件加载内容一次。

您需要创建状态变量并在routeChange处理程序回调中更新它，并使用setState将更新的状态变量绑定到您的视图。然后组件可以更新。

有关如何添加路由更改侦听器（https://github.com/ReactTraining/react-router/issues/3554）

的信息，请参阅此文章

Answer 3

好吧，所以我深究了它。

问题是我在 laravel 5.4的默认布局的默认client.min.js文件之前包含了我的app.js文件。由于某种原因，它以非常奇怪的方式破坏了反应。我要做的是切换包含两个文件的顺序。