React-router and history.pushState not sure if it's the right way to use it, is it ok to do this?

Question

React

I use React, React-router and Redux.
The essence of the issue: the site has several pages on which you can enable pop-ups. Pop-ups are the same pages (they have their own link), but are displayed on top of the page.
When opening such a window, I change the link in the browser, but I change it not with the help of react-router, but with the standard method in js history.pushState. This was done so that the react router would not catch the address change and the components on the page would not be replaced according to the new url.
The code works, everything is fine, but I wondered if it was right to do this? Tell me, do I understand correctly that the react-router should not catch such a change in the url and is this normal behavior for it?

Answer 1

Using some kind of architecture to do something around it is crutches. Either the architecture needs to be changed, or the code.
See how the modal issue is resolved here: stackoverflow.com/questions/28795085/react-router-...

Answer 2

Still, it’s more correct when using react-router to manage the address bar only through it without hacks and crutches. For example, you can do something like this:

const App = props => (
  <div>
    <Link to='/'><h1>App</h1></Link>
    <Link to='/news'> News </Link>
    <Link to='/about'> About </Link>
    {props.children}
  </div>
);

const Modal = props => (
  <div>
    <h3>Modal</h3>
    <p>{props.data}</p>
    <button onClick={props.onClick}>close</button>
  </div>
);

const withModal = Component => props => (
  <div>
    <Component {...props} />
    {props.params.id != undefined && <Modal data={props.params.id} onClick={() => {
      props.router.goBack();
    }}/>}
  </div>
);

const News = withModal(props => (
  <div>
    <h2>News</h2>
    <Link to='/news/1'>modal</Link>
    {props.children}
  </div>
));

const About = withModal(props => (
  <div>
    <h2>About</h2>
    <Link to={{pathname: '/news/1', state: 'about'}}>modal</Link>
    {props.children}
  </div>
));

const modalStates = {
  'about': About
};

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <Route path='news' component={News} />
      <Route path='about' component={About} />
      <Route path='news/:id' getComponent={(nextState, cb) => {
        let Component = News;
        const {state} = nextState.location;
        if (state && state in modalStates) Component = modalStates[state];
        cb(null, Component);
      }} />
    </Route>
  </Router>,
  document.body
);

Answer 3

https://reacttraining.com/react-router/web/example...