Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React router dom only re-render a component on page on dynamic routes

I’m currently working on a chat application.

Currently in my App.tsx, I have the following.

<Route path="/" element={<RootLayout />}>
  <Route index element={<Landing />} />
  <Route path="auth" element={<Auth />} />
  <Route path="chat" element={<Chat />} />
</Route>

In my Chat.tsx, I have a Navbar, Sidebar, and MainPanel component. How can I modify this so that the chat route takes an id parameter, and depending on the id of the chat, I re-render just the MainPanel component to update the chat (since the MainPanel component is the one displaying the conversations) rather than re-rendering the entire Chat component?

Tags:

2

Answers


  1. 0

    use useParams.

    You can get id by using useParams(), pass it like
    <Route path="chat/:id" element={<Chat />} />

    import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useParams,
} from "react-router-dom";

const Navbar = () => {
  return <h1>Navbar</h1>;
};

const Sidebar = () => {
  return <h1>Sidebar</h1>;
};

const MainPanel = ({ chatId }) => {
  return <h1>MainPanel - Current Chat ID: {chatId}</h1>;
};

const Chat = () => {
  const { id } = useParams();

  return (
    <div>
      <Navbar />
      <Sidebar />
      <MainPanel chatId={id} />
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<h1>Home</h1>} />
        <Route path="chat/:id" element={<Chat />} />
      </Routes>
    </Router>
  );
};

export default App;

    If you wanna play around with code.

    Login or Signup to reply.
  2. 0

    You could create a ChatLayout component which will have all the Navbar , Sidebar components which you want to reuse and not re-render on change in chat-id.
    Then create a nested route like

    <Route path="/" element={<RootLayout />}>
  <Route index element={<Landing />} />
  <Route path="auth" element={<Auth />} />
  <Route path="chat" element={<ChatLayout />}> 
    <Route path=":id" element={<MainPanel />}>
  </Route>
</Route>

    ChatLayout

    const ChatLayout = () => {
  return (
    <>
      <Navbar />
      <Sidebar />
      <Outlet />
    </>
  );
};

    MainPanel

    const MainPanel = () => {
  const { id } = useParams();
  return <h1>MainPanel - chat id - {id}</h1>;
};

    Inside the MainPanel you can use the useParams() hook to get the id.
    Note you should do all your routing and navigation using either useNavigate() hook or the <Link to="route-to-navigate"> route name</Link>

    For more detailed info regarding the above hooks and <Outlet/> you should checkout the react-router documentation of the version you are using. They have decent tutorials and examples to get started.

    If you want to checkout the code , I have created a sample sandbox here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search