reactjs react router在URL中獲取更改

Question

我知道您可以使用this.props.match.params訪問URL中的params id。 我的問題是您如何獲取用戶可能在URL中操縱的更改？ 例如：在道具http：// localhost：3000 / user / 3456653 / newPage中從路由器傳遞的原始URL

用戶填寫該頁面並弄亂了URL參數id，例如： http：// localhost：3000 / user / 888888 / newPage

有沒有一種方法可以在進行api調用來存儲數據之前檢查參數是否相同？ 我正在使用“ react-router-dom”：“ 4.2.2”

Answer 1

您可以在給您的Route的組件的componentDidUpdate掛鈎中比較參數，以了解其更改時間。

示例（ CodeSandbox ）

class MyComponent extends Component {
  componentDidUpdate(prevProps) {
    const prevPathParameter = prevProps.match.params.pathParameter;
    const newPathParameter = this.props.match.params.pathParameter;

    if (prevPathParameter !== newPathParameter) {
      console.log("pathParameter changed!");
    }
  }

  render() {
    return <h1> {this.props.match.params.pathParameter}</h1>;
  }
}

function App() {
  return (
    <Router>
      <div>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
        <Route path="/:pathParameter" component={MyComponent} />
      </div>
    </Router>
  );
}