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

Reactjs – NextJS 14: How to share data between components when using app router?

I just 20 days old into nextjs so I may be missing quite a few thing.
I have a dashboard page server side rendered which has 3 components.
I have a component (tsx) with a button which when clicked should update a table on another component on the dashboard.

What is the best way to implement if server side rendering and using the 3 component is a mandatory?
Do I need to use something 3rd party like redux or app router is well equipped to achieve this

I am using nextjs 14 (app router) with typescript

basic ui diagram

Tags:

2

Answers


  1. 0

    If Component 3 and Component 2 do not have a common parent, then you could use either

    1. Context / Provider
    2. Third party state libraries like (Redux, Zustand)

    If they have a common parent, then you could just have a state at the common parent and pass handler functions to set the state on Component 3 and the state itself to Component 2.

    Login or Signup to reply.
  2. 0 
    import { useRouter } from "next/router";
const FirstPageComponent = () => {
    const router = useRouter();
    const handleClick = () => {
        router.push({
            pathname: "/sencondPage",
            query: { data: "" },
        });
    };
    return <button onClick={handleClick}>Go to Second Page</button>;
};
// Component in Second Page
const SecondPageComponent = ({ data }) => {
    return <div>Data from First Page: {data}</div>;
};

export default SecondPageComponent;

// Set data in First page
localStorage.setItem("Key", "data");

// Get data in Second Page
const data = localStorage.getItem("key");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search