如何从中获取传递数据的值<Link/>我在 Reactjs 中的下一个功能组件页面中的组件

Question

I have two pages, i want to pass data from one functional component to the other, i am trying to achieve this by using <Link/> but i don't know how i would retrieve this in my other page:

here is my code:

FirstPage:

const CustomerListResults = () => {
             <Link
                to={{
                pathname: "/app/CustomerDetails",
                data: id // your data array of objects
                }}>

                <Button
                  color="primary"
                  variant="contained"
                >
                  Expand
                </Button>
              </Link>
}

My Second Page that i need the data in:

const CustomerProfile = () => {
      // here i want to get the id i passed in the <Link/> component
}

my Routes.js file:

const routes = [
  {
    path: 'app',
    element: <DashboardLayout />,
    children: [
      { path: 'account', element: <Account /> },
      { path: 'customers', element: <CustomerList /> },
      { path: 'CustomerDetails', element: <CustomerDetails /> },
      { path: 'ReportDetails', element: <ReportDetails /> },
      { path: 'report', element: <ReportList /> },
      { path: 'freight', element: <FreightList /> },
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'analytics', element: <Analytics /> },
      { path: 'products', element: <ProductList /> },
      { path: 'settings', element: <Settings /> },
      { path: '*', element: <Navigate to="/404" /> }
    ]
  },
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { path: 'login', element: <Login /> },
      { path: 'register', element: <Register /> },
      // { path: '404', element: <NotFound /> },
      { path: '/', element: <Navigate to="/login" /> },
      { path: '*', element: <Navigate to="/app/dashboard" /> }
    ]
  }
];

export default routes;

Answer 1

If I'm not wrong you want to pass data from Pages linked with the Router, Route and Link.

To accomplish that I use 'react-router-dom' insthead of 'react-router'.

When I am on a Page and I programmatically push another with : history.push() you can even pass the state, and inside that you can put whatever object you want.

To retrive it on the other Page you have to use : useLocation().state

It will return the state object passed before. So basically you can go like :

history.push({location:"path/to/next/page", state : { obj : "value1",obj2 : "value2"});

and in the next page you can destructure at the start like :

const {obj,obj2} = useLocation().state;

I'm sorry I can't use the "code mode" because I'm from mobile.

Answer 2

Are you using react-router <Link /> ? If you are you can use its useParams() like this:

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

you can find the docs here