Question

我使用的是React Router v4，重新加载页面时遇到了一些问题（不是window.location.reload）。我最好给出一个实际的用例来解释这个问题，我们以一个社交网络应用程序为例：

用户A评论了用户B的帖子，一条通知显示在用户B页面中。
用户B单击该通知，我们做了cutree.res <- cutree(hclust.res, k = 3) # three clusters, whereas cluster 2 contains the required amount of objects > cutree.table cutree.res 1 2 3 14 9 5，它起作用了，因此用户B转到了this.props.history.push('/job/' + id')页面。
用户A再次发表评论，新通知出现在用户B页面中，而用户B仍然停留在job/123页面上，他单击了通知链接并触发了job/123。但是他不会看到页面重新呈现，他没有看到最新评论，因为页面没有任何作用。

Answer 1

您应该在postId生命周期中观看componentWillUpdate的更新，并从此处进行以下操作：

  componentWillUpdate(np) {
    const { match } = this.props;
    const prevPostId = match.params.postId;
    const nextPostId = np.match.params.postId;
    if(nextPostId && prevPostId !== nextPostId){
      // do something
    }
  }

Answer 2

您要描述2种不同的状态变化。

在第一种情况下，当用户B在/job/:id页上为 not 且他单击链接时，您将获得URL更改，这将触发路由器的状态更改并传播更改到您的组件，以便您可以查看注释。

在第二种情况下，当用户B已经在/job/:id页面上且出现新的注释时，不需要更改URL，因此单击链接将获得不会更改网址，也不会在路由器中触发状态更改，因此您将看不到新内容。

我可能会尝试这样的事情（伪代码，因为我不知道您是如何通过网络套接字获得新评论或订阅的）：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>The home page</h1>

        {/* This is the link that the user sees when someone makes a new comment */}
        <Link to="/job/123">See the new comment!</Link>
      </div>
    );
  }
}

class Job extends React.Component {
  state = { comments: [] };

  fetchComments() {
    // Fetch the comments for this job from the server,
    // using the id from the URL.
    fetchTheComments(this.props.params.id, comments => {
      this.setState({ comments });
    });
  }

  componentDidMount() {
    // Fetch the comments once when we first mount.
    this.fetchComments();

    // Setup a listener (websocket) to listen for more comments. When
    // we get a notification, re-fetch the comments.
    listenForNotifications(() => {
      this.fetchComments();
    });
  }

  render() {
    return (
      <div>
        <h1>Job {this.props.params.id}</h1>
        <ul>
          {this.state.comments.map(comment => (
            <li key={comment.id}>{comment.text}</li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/job/:id" component={Job} />
    </Switch>
  </BrowserRouter>,
  document.getElementById("app")
);

现在，在两种情况下页面都将得到更新。

Answer 3

在许多情况下，这似乎是常见的情况。可以使用许多不同的方法来解决它。选中此stackoverflow question。有一些很好的答案和发现。就我个人而言，this approach更有意义。

每当用户尝试在页面之间导航时，即使在同一location.key中，

route也会每次更改。要在您的/jod/:id组件中的代码块下面测试此位置，

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {
      console.log("... prevProps.key", prevProps.location.key)
      console.log("... this.props.key", this.props.location.key)
    }
  }

我也有同样的情况。 componentDidUpdate中的更新状态。之后，按预期工作。单击同一路线内的项目会更新状态并显示正确的信息。

我假设（不确定您如何在/job/:id中传递/更新评论），如果您在/job/:id组件中设置了这样的内容应该可以起作用：

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {

      this.setState({
        comments: (((this.props || {}).location || {}).comments || {})
      })
    }
  }

Answer 4

这为我解决了问题：

import { BrowserRouter as Router,Route,Switch,Redirect} from "react-router-dom";

<Router>  
 <Switch>

     <Redirect from="/x_walls/:user_Id" to='/walls/:user_Id'/>
     <Route path="/walls/:user_Id" exact render={(props) => <Wall {...props}/> }/>           

  </Switch>

</Router>

而当您要调用“墙”时，您只需调用“ x_walls”

当在同一路径上访问时，反应路由器链接不会引起重新渲染

4 个答案: