New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<BrowserRouter />will make child component run more times,when page reloaded. #5433

Closed
xianshannan opened this Issue Aug 15, 2017 · 5 comments

Comments

Projects
None yet
3 participants
@xianshannan

xianshannan commented Aug 15, 2017

See the demo https://github.com/xianshannan/test

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

class Test extends React.Component {
  componentWillMount(){
    console.log('componentWillMount');
  }
  componentWillReceiveProps(nextProps) {
    //这里页面重载时,不应该运行的
    //When page reloaded,it should not run.
    console.log('componentWillReceiveProps');
  }
  render() {
    console.log('render');
    return <div>test</div>;
  }
}
render(
  <BrowserRouter>
    <Test />
  </BrowserRouter>,
  document.getElementById('root')
);

Component Test componentWillReceiveProps should not run,when page hard refreshed.
<HashRouter /> does not have this problem.
It only happend in safari.

@pshrmn

This comment has been minimized.

Show comment
Hide comment
@pshrmn

pshrmn Aug 15, 2017

Collaborator

To clarify, you're saying that when you refresh your page, the componentWillReceiveProps function is being run? When you do a hard reload, the previous DOM contents should be wiped out. I can't think of a good reason why that would not be the case, but I would probably un- and re-install your dependencies in case something weird is happening with them.

Collaborator

pshrmn commented Aug 15, 2017

To clarify, you're saying that when you refresh your page, the componentWillReceiveProps function is being run? When you do a hard reload, the previous DOM contents should be wiped out. I can't think of a good reason why that would not be the case, but I would probably un- and re-install your dependencies in case something weird is happening with them.

@timdorr timdorr closed this Aug 15, 2017

@xianshannan

This comment has been minimized.

Show comment
Hide comment
@xianshannan

xianshannan Aug 16, 2017

I foget,it only happened in safari!!!

xianshannan commented Aug 16, 2017

I foget,it only happened in safari!!!

@pshrmn

This comment has been minimized.

Show comment
Hide comment
@pshrmn

pshrmn Aug 16, 2017

Collaborator

This sounds like a browser bug, so I'm not sure that there is a lot that React Router can do, but it certainly is weird that this is happening.

Unfortunately, I don't believe that I can install Safari on Linux (easily), so I don't have a good way to test this. What happens if you add a componentWillMount lifecycle function to <Test>? If cWRP is being called, I assume that that will not be called when you reload.

Collaborator

pshrmn commented Aug 16, 2017

This sounds like a browser bug, so I'm not sure that there is a lot that React Router can do, but it certainly is weird that this is happening.

Unfortunately, I don't believe that I can install Safari on Linux (easily), so I don't have a good way to test this. What happens if you add a componentWillMount lifecycle function to <Test>? If cWRP is being called, I assume that that will not be called when you reload.

@xianshannan

This comment has been minimized.

Show comment
Hide comment
@xianshannan

xianshannan Aug 16, 2017

Here is the log after adding componentWillMount(in safari).
[Log] componentWillMount (bundle.js, line 46859)
[Log] render (bundle.js, line 46871)
[Log] componentWillReceiveProps (bundle.js, line 46866)
[Log] render (bundle.js, line 46871)

xianshannan commented Aug 16, 2017

Here is the log after adding componentWillMount(in safari).
[Log] componentWillMount (bundle.js, line 46859)
[Log] render (bundle.js, line 46871)
[Log] componentWillReceiveProps (bundle.js, line 46866)
[Log] render (bundle.js, line 46871)

@pshrmn

This comment has been minimized.

Show comment
Hide comment
@pshrmn

pshrmn Aug 16, 2017

Collaborator

It sounds like there is an extra location emitted by history. Can you try running the following code?

import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory();
browserHistory.listen((location, action) => {
  console.log('LOCATION CHANGE:', location, action);
  console.trace();
});

You should be able to set that as the index.js content of your create-react-app project. If it is an issue with history, then that should log twice when you reload the page.

Also, if this does turn out to be related to history, we should probably move the conversation to a new issue over there.

Collaborator

pshrmn commented Aug 16, 2017

It sounds like there is an extra location emitted by history. Can you try running the following code?

import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory();
browserHistory.listen((location, action) => {
  console.log('LOCATION CHANGE:', location, action);
  console.trace();
});

You should be able to set that as the index.js content of your create-react-app project. If it is an issue with history, then that should log twice when you reload the page.

Also, if this does turn out to be related to history, we should probably move the conversation to a new issue over there.

@ReactTraining ReactTraining deleted a comment from lcoder Dec 5, 2017

@ReactTraining ReactTraining deleted a comment from xianshannan Dec 5, 2017

@ReactTraining ReactTraining deleted a comment from lcoder Dec 6, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment