React componentDidUpdate 在 url 更改时不会更改

Question

Match.params 没有在componentDidUpdate().

我的路线是/sidebar/:id，如果从sidebar/1我去sidebar/2的this.props.match.params.id是仍然显示id为1，而不是更新的URLid 中2componentDidUpdate()

尝试过props.location但仍然显示旧网址的数据。

侧边栏页面组件

 componentDidMount () {

    const id  = this.props.match.params.id;

    //fetching some data

}

componentDidUpdate(prevProps) {

    console.log("Prevprops",prevProps.match.params.id);

    console.log("Cuurent id",this.props.match.params.id);

    //if both ids not same then fetch data again

}

路由器

const routes = [

  {

    path: "sidebar/:id",

    component: asyncComponent(() => import('../sidebarPage')),

  },

];

class AppRouter extends Component {

  render() {

    const { url } = this.props;

 return (

      <div>

        {routes.map(singleRoute => {

          const { path, exact, ...otherProps } = singleRoute;

          return (

            <Route

              exact={exact === false ? false : true}

              key={singleRoute.path}

              path={`${url}/${singleRoute.path}`}

           />

          );

        })}

      </div>

    );

  }

}

我希望当我去sidebar/1到sidebar/2的componentDidUpdate this.props.match.params.id节目2和prevProps表演1。

Answer 1

您asyncComponent仅使用初始值props并且不会对更改做出反应。试试这个代码：async componentDidMount() {&nbsp; this.mounted = true;&nbsp; const { default: Component } = await importComponent();&nbsp; Nprogress.done();&nbsp; if (this.mounted) {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; component: Component&nbsp; &nbsp; });&nbsp; }}render() {&nbsp; const Component = this.state.component;&nbsp; return (&nbsp; &nbsp; <ReactPlaceholder type="text" rows={7} ready={Component !== null}>&nbsp; &nbsp; &nbsp; {Component ? <Component {...this.props}/> : <div/>}&nbsp; &nbsp; </ReactPlaceholder>&nbsp; );}