React Router 6 send data from link to target page

#react #reactrouter

use Link, useLocation from React-Router 6, send my filterList data from list to detail page.

After enter filter in list page, click on row and go to detail page, then we can go back to list page with filters we added.

import {
  Link as RouterLink,
} from "react-router-dom";
import { useLocation } from "react-router";

List page:

<Button
  variant="contained"
  color="primary"
  size="small"
  style={{ marginLeft: 16 }}
  component={RouterLink}
  state={{ filterList: state.filterList }}
  to= {`/collections/${params.row.id}`}
>
  Edit
</Button>

Detail page:

<Button
  variant="outlined"
  startIcon={<KeyboardBackspaceIcon />}
  to="/collections"
  state={{filterList: location.state.filterList}}
  component={RouterLink}
>
  back to list
</Button>