javascript - React 不更新 DOM (Laravel)

Question

我已经设置了一个带有哈希导航的基本 React 应用程序。问题是当我点击任何链接在页面之间导航时，我看到 url 中的哈希值正在正确更改，并且我添加了一个 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....