Javascript React不更新DOM（Laravel）

我已经设置了一个带有哈希导航的基本react应用程序。问题是，当我单击任何链接在页面之间导航时，我看到url中的哈希值正在正确更改，并且我在我的布局的

render

中添加了

console.log

，以查看它是否被调用，以及它是否被调用，使用正确的

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

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{IndexRoute，Router，Route，Link，hashHistory as history}；
类布局扩展了React.Component{
render（）{
log（this.props、document.location.hash）；
返回
LEYAUTI MLEAYTI{Math.random（）}
{this.props.children}
{this.props.params.project}
}
}
类CreateProject扩展了React.Component{
render（）{
返回
创建项目
}
}
类项目扩展了React.Component{
render（）{
返回
PROEKTI MROEKTI
新项目
}
}
ReactDOM.render(
,
document.getElementById（'app-root'）；

下面是当我在几个路线上导航时控制台中发生的情况的一个可视化视图，但DOM保持不变

---

如果只更新url中的标签，则组件实际上没有卸载/重新装载。但是，路线已更新。因此，在刷新页面时，您只能看到组件加载内容一次

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

---

请参阅本文，了解如何添加路由更改侦听器（）

这可能是hashHistory的问题。您使用的路由器版本是什么？对于v4及以上版本，您需要像这样使用历史记录-

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

---

好吧，所以我开始追根究底了

---

问题是我在laravel 5.4默认布局的默认

app.js

文件之前包含了我的

client.min.js

文件。由于某种原因，它的反应非常奇怪。我要做的是切换两个文件的包含顺序。

您可能需要在路径的前面添加一个正斜杠（

/

），例如

@Aron好吧，路由似乎正在运行，但是我尝试了您的建议，但没有多大效果。问题在于呈现部分，因为我的组件被正确传递。所以问题在于，尽管路由发生了变化，呈现函数也在运行（因为你可以看到console.log），但在刷新之前页面上没有任何变化？@Aron yes，我看到了第一次打开的任何路线上加载的初始页面。从这里很难看出为什么它不起作用。我建议创建一个能显示问题的应用程序，这样我们就可以尝试并调试它了。我使用的是react router and history的版本3。这不是路由的问题，即使我做了
这件事，它也不会更新DOM。setState
没有对DOMI应用任何更改，因为它是一家私人公司，所以不能共享回购协议。我只是尝试创建一个新的公共回购协议，其中只包含这段代码，然后它就成功了。所以问题出在我当前项目的某个地方，现在我把它包括在一个laravel项目中，我不知道这是否有任何意义，但我真的不知道在这一点上该怎么想..我真的很迷信，检查回购设置，尝试克隆和npm安装在不同的文件夹中等。我想我发现了问题。。。当前，我的代码正在使用
blade
呈现，其中
client.min.js
的
srcipt
标记位于
@部分中。如果我从视图中删除所有刀片标记，只保留html标记，那么react就可以正常工作。你有什么想法吗？事实证明这是一件相当意外的事情，谢谢你抽出时间，先生。