如何在 url 更改时重新渲染 react 组件？

Question

I have a route like so:

<BrowserRouter>
      <Switch>
        <Route path="/question/:title" component={Item} />
      </Switch>
    </BrowserRouter>

The component uses axios to fetch data and update the content on the site, this is done in the componentWillMount function:

componentWillMount(){
        const {title} = this.props.match.params;
        axios.get(server + '/api/question/slug/' + title)
                .then(response => {
                    this.setState({
                        question: response.data,
                        loading: false
                    })

                })
    }

The problem now is that, let's say I'm on a page "site.com/question/this-is-an-article", and I use <Link to="/question/second-article">Second Article</Link> to navigate, it's like the componentWillMount function is not being called so the former content still remains on the page. How can I make the componentWillMount function to run when there is a change in the url?

Answer 1

First of all, use safe life-cycle is preferred react-lifecycle-methods-diagram

Since you are using react-router-dom , you can get your URL via render props like this, refer to document here

history.location.pathname

So you may try to check if url changed in shouldComponentUpdate like this

shouldComponentUpdate(prevProps, prevState) {
  return this.props.history.location.pathname !== prevProps.history.location.pathname
}

You can add more condition inside of it, or just prevent complex condition via component design adjustment

Answer 2

Try using the componentDidUpdate for the axios calling. Necessarily - you want to call the api when title(a prop) parameter change.

You may also try componentWillReceiveProps / UNSAFE_componentWillReceiveProps for the same.

PS - use componentDidMount along with above aptly. Look for lifecycle here http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Answer 3

I think you don't need any life cycle, (if yes, just use componentDidMount):

class App extends Component {
  constructor() {
    super();
    this._initHistoryListen();
  }
  _unListen = () => {};
  _initHistoryListen() {
    this._unListen = history.listen((location, action) => {
      const {
        title
      } = this.props.match.params;
      axios.get(server + '/api/question/slug/' + title)
        .then(response => {
          this.setState({
            question: response.data,
            loading: false
          })

        })
    });
  }
  componentWillUnmount(){
     this._unListen()
  }
}