React Router in closing the private chat

At this week, I am struggling with React Router part. My task is removing the private chat from the list when the user select close it. When the user click "X" button(icon) of opened private chat, the link should be moved from "/users/chatID" to "/users/" and the opened private chat should be closed.


Router is used to keep UI in sync with the URL. It is a powerful and simple routing library and helps to add new screen and flows to application quickly, keeping url in sync with what's being displaying on the page. I thought there are some specific logic to handle changing url without reloading a page in server-side, but nothing is in there.

In the Route component, the url will be changed and the private chat window will be opened automatically. And when the user input just user/chat, public chat room is going to be opened instead of opening the private room.

This component is Link which is the primary to navigate the page(url) and it is the similar functionality with <a> tag in HTML5 which is not including reloading the page. If the current route is linked including the descendant, this <Link> will be active.


I am going to implement the part of re-rendering the messages from other when the user close the private chat. I need saving the information of the closed chat and filter by using this information.