How specifically to tell react-router where to render?

Question

JavaScript

Hello !
There is a small SPA application. On the main page, only the side menu is completely framed by the BrowserRouter and everything is clear with this, there are only two links (home and users).
However, when I click on the "users" link, I render a table with these same users (Ant Design Table). I want that by clicking on the user name, another component is called IN THE PLACE of this table. At the moment it looks something like this:

{
      key: "1",
      title: "Name",
      dataIndex: "name",
      render: (text: string) => (
          <Link to={"/users/posts/" + text} component={UserPosts}>{text}</Link>
      ),
    },

However, there are two points here. Since the above section of code is responsible for displaying the table column, the cell itself changes instead of the link. The second point - I can't pass the props described in the UserPosts component with this method, but they are necessary.

export default function UserPosts({name}: {name: string | undefined}) {

  return (
    //Заглушка
    <h1>
      Посты {name}
    </h1>
    );
}

Intuitively, I understand that there should be some global access to the path in the browser line, but I don’t understand how to explicitly specify where the component should be rendered, and from child to parent, with passing props.

Answer 1

hang the handler with .on('click',function(){}) , kill it(.off('click')) after the button is clicked, and hang it again when the content is successfully loaded

Answer 2

Everything is working:

jQuery(function($) {
  $('#true_loadmore').click(function(){
  
    	var $el = $(this),
        	$preloader = $('.preloader');
    var data = {
      'action': 'loadmore',
      'query': true_posts,
      'page' : current_page
    };
    
    $.ajax({
      url:ajaxurl, // обработчик
      type: 'POST',   
      data:data, // данные
      cache: false,
      beforeSend: function( ) {
        $el.hide(); 
        $preloader.show();
      },
      success: function(data){
        if( data ) { 
          $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
          current_page++; // увеличиваем номер страницы на единицу
        } else {
          $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
        }
      }           
    })
    
    .complete(function() {
      $preloader.hide();
      $el.show();           
    });   
  });
});

But is it right?

Answer 3

<div id="true_loadmore">Загрузить ещё</div>

jQuery(function($){
    $('#true_loadmore').click(function(){
    	if (!$(this).hasClass('in-progress'))
    	{
      	$(this).addClass('in-progress');
          $(this).text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер
          var data = {
              'action': 'loadmore',
              'query': true_posts,
              'page' : current_page
          };
          $.ajax({
              url:ajaxurl, // обработчик
              data:data, // данные
              type:'POST', // тип запроса
              success:function(data){
                  if( data ) {
                      $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
                      current_page++; // увеличиваем номер страницы на единицу
                      if (currentPage == maxPages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
                  } else {
                      $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                  }

                  $('#true_loadmore').removeClass('in-progress');
              }
          });
    }
    });
});