Question

我知道您可以使用this.props.match.params访问URL中的params id。我的问题是您如何获取用户可能在URL中操纵的更改？例如：从路由器在道具http://localhost:3000/user/3456653/newPage

中传递的原始网址

用户填写页面并弄乱了url params id 例如：http://localhost:3000/user/888888/newPage

有没有一种方法可以在进行api调用以存储数据之前检查参数是否相同？我正在使用“ react-router-dom”：“ 4.2.2”

Answer 1

您可以在componentDidUpdate的组件的Route钩子中比较参数，以了解其更改时间。

示例（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>
  );
}

reactjs react router在网址中获取更改

1 个答案: