How to pause the re-render of a component?

Question

JavaScript

Hello. There is a component/page with an infinite scroll of articles. At a certain level of scrolling, the url changes.
For example:
It was:
/news/article-1
Scrolled and became:
/news/article-2
the same component is rendered on both of these urls
When only the name of the article article-* changes, the component does not render, everything works as it should. Page with articles appearing on scroll.

The problem arises when the url changes to /world-news/article-1
Expectation: loading the next article in the general article stream
Fact: the component is completely re-rendered, as a result, the scrolled articles disappear. The effect is as if we have reopened the page.

So I kind of understand what's going on. React-router sees the url change and restarts the route lookup.

Is there any way to tell react-route that we don't need to run reroute at the moment?

The component is written using hooks in a functional style.

Here is an example of the routes of the article


I change the url like this Code for generating data for routes
history.replace(`/${fullUrl}`, {})

const routes = [];

// Static
routes.push(
  {
    path: '/search',
    component: SearchResultList,
  },
  {
    path: '/special-projects',
    component: SpecProjectPage,
  },
  {
    path: '/authors/platform',
    render: props => <Tags {...props} type="leaders" rubric="platform" />,
    exact: true,
  },
  {
    path: '/',
    component: MainPage,
    exact: true,
  },
  {
    path: '/news',
    component: NewsPage,
    exact: true,
  },
  {
    path: '/about',
    component: AboutPage,
    exact: true,
  },
  {
    path: '/story',
    component: PlotPage,
    exact: true,
  },
  {
    path: `/story/:url`,
    component: InnerPlotPage,
  },
  {
    path: `/${decodeURI('устойчивое-развитие')}`,
    render: props => (
      <Tags isGrowth type="leaders" rubric="устойчивое-развитие" />
    ),
    exact: true,
  },

);

// Rubric Types
['ecology', 'society', 'economy', 'platform'].forEach(type => {
  routes.push(
    {
      path: `/${type}`,
      render: props => <RubricBlocksList {...props} rubric={type} />,
      exact: true,
    },
    {
      path: `/leaders/${type}`,
      render: props => <Tags {...props} type="leaders" rubric={type} />,
      exact: true,
    },
    {
      path: `/leaders/${type}/:pathName`,
      render: props => <TagBlocksList {...props} rubric={type} />,
      exact: true,
    },
    {
      path: `/tag/${type}`,
      render: props => <Tags {...props} type="tag" rubric={type} />,
      exact: true,
    },
    {
      path: `/tag/${type}/:pathName`,
      render: props => <TagBlocksList {...props} rubric={type} />,
      exact: true,
    },
    {
      path: `/author/:pathName`,
      render: props => <TagBlocksList {...props} rubric={type} />,
      exact: true,
    },
  );
});

// Article Rubric Types
const test = [];
[
  'устойчивое-развитие',
  'ecology',
  'society',
  'economy',
  'platform',
  'news',
].forEach(type => {
  test.push({
    path: `/${type}/:articleName`,
    children: () => <ArticlePage />,
  });
});

// Static
routes.push({
  component: NotFoundPage,
});

export { routes, test };

Answer 1

https://reactjs.org/docs/react-component.html#shou...

Answer 2

there is no such thing as "rerouting".
if a component is rendered completely anew, then at some point a component is unmounted and another component is mounted.
Maybe react-router does it, maybe it doesn't.
Show the route code to get started.