Question

当我通过历史记录的推送方法更改路线时，没有重新渲染从 http://localhost:3000/dashboard/104?patientView=true。
至。 http://localhost:3000/dashboard/104

通过使用history.push方法

我无法输入实际的，但部分看起来像这样。 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route } from 'react-router-dom';
import history from './common/CreateBrowserHistory';
ReactDOM.render(
<Provider store={store}>
  <Router history={history} onUpdate={() => handleUpdate()}>
     <App>
          <Route exact path={routeUrl+"/"} component={Auth0Login} />
          <Route exact path={routeUrl+"/dashboard"} />
  </Router>
 </Provider>
, document.querySelector('.appcontainer'));

在dasboard.js上，其路由为http://localhost:3000/dashboard/104?patientView=true。

点击

我在做

history.push('/dashboard/104')

来自util.js文件

Answer 1

由于url格式相同，所以react不会重新呈现自己，为此您必须使用自己的代码来实现。根据您的说法，网址是

/ dashboard / 104

但网址是

/ dashboard /：id

或与以上类似

您可以在组件中的上方链接中使用以下代码来实现重新渲染

 componentDidUpdate = (prevProps) => {
    if (this.props.match.params.id !== prevProps.match.params.id) {
        this.id = this.props.match.params.id;
        this.setState({
            loading: true,
        })
        // fetch the new dashboard detail based and set it to the state of the component
    };
};

Answer 2

您必须像这样更改路线

<Route path={routeUrl+"/dashboard/:id"} component={Dashboard} />

如果使用 React DevTools ，则可以看到这两个URL的更改。

对于http://localhost:3000/dashboard/104?patientView=true

您将在search

下看到类似search="?pagelife=true"的 props.location 值

并且对于http://localhost:3000/dashboard/104网址 search 将为空

您将在 componentDidUpdate

中获得更改

componentDidUpdate() {
    console.log("update: ", this.props.location);
  }

更新

这是我的示例代码

App.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import Home from "./home";
import Page2 from "./page2";

class App extends Component {

  render() {
    return (
      <Router>
        <div id="container">
          <div>
            <Link to="/">Home</Link>
            <Link to="/page2">Page 2</Link>
          </div>
          <Switch>
            <Route exact path="/page2/:id" component={Page2} />
            <Route exact path="/page2" component={Page2} />
            <Route exact path="/" component={Home} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

和 Page2 类组件

import React, { Component } from "react";

class Page2 extends Component {
  state = {};

  componentDidMount() {
    console.log("mount: ", this.props.location);
  }

  componentDidUpdate() {
    console.log("update: ", this.props.location.search);
  }

  render() {
    return (
      <div>
        <h1>page 2</h1>
        <button
          onClick={() => {
            this.props.history.push("/page2/2?page=true");
          }}
        >
          Query String
        </button>
        <button
          onClick={() => {
            this.props.history.push("/page2/2");
          }}
        >
          No Query String
        </button>
      </div>
    );
  }
}

export default Page2;

history.push没有在react中重新渲染路线

2 个答案: