diegomura / diegomura/react-pdf
Destinations (id) API handling for multiple pages
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
**Describe the bug**
When using the [destinations API](https://react-pdf.org/advanced#destinations) and setting an `id` on a `` component, it works great as long as you don't have a `` that wraps to multiple pages. If it wraps to multiple pages, the `id` will get applied to each subpage and this means any link you make to that `id` will take you to the last page. Ideally I would want it to take me to the first page that was tagged instead.
**To Reproduce**
1. Create a `react-pdf` document that has
a. A `` component with enough content that it doesn't fit on a single page and gets split across multiple pages.
b. The `` should have an `id="something"` set
c. Somewhere else in the document create a `Click me` element
2. Render your PDF and click on the "Click me" link
You can use [this](https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531640905400a02180e619da511d400c923001ac604004ec1b002200c41043328002d27f25c4a80150c28d8061003649814dd319acad20105802630a2f29581d4101eb4b1a178e5604000cc60f904600098006860008c116091613dbc21ecb0fca204b001586125a031795ca801e98d4c0caa25a58445aba284c8285ada4b5d95d53474c0f564a0013c2c31b001bda1c6302000e892415d46017d9b448c4d616627a6f7e617022a30e4d661c350315d37446000fc60cce5cb31dc01ddd2b4615f7980a0005a0003ab9220f4e96c6a3b3ba51b6a6119cc0e6309a2ca0e90986ce860783200056e82c2b8b0165e0c000b2bc30300b4bc6aad4d8909683311fb198a28ebc54939cec472521f8080c05860c4e799c006e54cc041e930a65c200928c0282a4487645cd164815608d66aca3c9144a2a8ea0a102a8011df184802302cf1c0bd1aaaab0ea0b235ecad42c200824ba2a098b7650ccbc604016ea02e7f22a005cb8dc9c9789e51492c9a0302b9ac480033ce346300c1e2cec06cff98922f0af11820750c074ae5e059f8fe1a02c0db8a401330a99829229549a6f0d572ba88e3d1ccd6a216985306c3b00511c4207116043f042bdfee53a9b4c498a18a37f1803449578c04f306b520cefe7f880e48db93311297da47718081a7f9d11846303fc6b4b009490095c3324577ac9046d9b72c495acb72a4002f3245818178680900b026390404482a108370eda5014105e1125c38070c71709495006002c3758260500e45795c07c161800055300c9101b0b24c526c5b7b00043ec8a5600c92023b692e43016f4482026d816b0f33ec30f13b213c69799f72142c0420b202cf69410a33b2080c4a482a5ade20ec265608b2d32c98040b3914881f0e6c002f9c58126c34490e0f4200478a9a0840933ec108e3185d1ecb93c05f518703572d2a0579b240b427997b5f5eb7f86f4cd782e217115b2bc82b7ec33600d774b645e08f0ecc50958510930449a48b050ec8dae14d70e2605cac9525b22b9e64f1b20cd6404072e94105a2e2f823f240201ad123735c703faac0582ca823fca9324202c09c300935b258f00e6f730687c902ddfc460248ecae13cb8e30c07030b1c50ae925498057325ab1928511a30de1aeb14dc8604203bc886381be364100cf491877b8442022f7f1b08c0376bac6843dac90bae47209ac90d0ba4ffdfc02d8152450c49718c3c30ec58080b0d25aee157e7a1a89ba6b0f034686c6b2400c6d8924cb8800c4e475bc5cd30b6977b30085681708ec1b113fc59ae1c9018447c2fb30b18a0f0d099931731c55e52c91b3be883c422f21cec728160f154942dc2b5900006e181f824c711555c391d73b2e4647ab01542dab78142b8c406f578716254b18f648f63c1617efe7d433c5853dcf31553bc408981fc441e62aef05c6d0a9bfc5a40b11241d6a90708ce1601dbfb62ec8b93f1b2abc21e24ca16230ff1e660115a4858021f095d71802e464ac062ca324d24dbc2070c12d45642245cbfb304ccce51e8ebed491553b4aef8a0f815bd0b680400ec7555e53003e8b2435a9b7096242958207648184532370ca1784212652c1a55c0004b914978ce93566c58c3da416042b9aa9a67ba8f82a08e684639b1bc25d8938bd34e59c501e72e705cde446a6b7dc411a199c56610ca6904746ec5ac1382823045b16d042498fc36446ec116c8767a04816b3f806eec34380f6d2a98452f030a200880a0c6cc4cfb0600be560cf0ad49eb64099c85daebc3c34a506571607e660ef34fc1b0ac002440ab81cc93db9af63f0c34b0700c2c2288b09632ca991cba624e48cdba417ec1501298075a5958a9c0a080808aa961608d883816026fc0dc5924f0be37d1c968ad23b99ab02ce3d930857eecdd1c7dd4ccb99ec17e5a4d91692290dc7b43c1a70b61803b19d4606655c345246a3585b0224c31df45fb5ecd258c4e15dafdd7184c338193d09ef6be180250e662277501ae4958085e1b009ca08186ad279e31c6aad6659628bc421589430570596e9b9d728602a25482c4e224825585be3042b8d403fe79ad3d2b356191300e5b0a6cc54942800652c25296307655e0b3d32924566acc5215519b59c27a1202825b2393456d4808b6424c34cbc9cd518184b693c8f62f2de4672c04fce438d659af4669914ccf8c261135063a22faf07c56e55e35e0c0063b228c3929d4b498a729e11c31e1514e00c51a14fc438169e56694d979aa1080b3dd208078cfd9c9624909b212429a9c46cdec13d2b547c52460261162450aa45231412afc24e1a4582d12154298013a8ecff36ebda870404092217729ade265c3383597d1264480593c1f4a40f027101ce1a131c0a22dce6e49b088962378dcae336a31a2da81490d042a28a2ad7c5983391ba195b23ff41a1847a5607080f9d1358aa4c9babb6ac0d61c7ba068e25d35d68e9d4254f22e3660f6cd307609415ac90872a4c4993a108646e9486b24981428e1509a11eccc2dd29a5a40b2f4972ce4c9527700f94594ed54222800b172313ab9fbf36f6659936b5798ed42c0d90c2cca1f29f349671c680ef1e07493045565f950b81d6824ab71b20d5ab9c54bc9246b1334ab6e72752ce33edb51b5fc00041456d0073260544ca4ed7cc2fce904224b263b20731194e6d844017100072d3dc45924fc058be5a10365a5023a2ad265b6e80021485549d6a8a65652b73bdb240491c0a2464510c5059a7e098dae8af5036bbcfb64154ffcfe443098f58fd0de33a6010a5260e2af8e0a57531425720b00befccfd965066a2d86bf3636720009accbcc48e4b5864c8ad0364aa3e1155123f67eb346e7a15d57cdfeb24a1ea07fd7f37f8e2c63814fcd6a60068991ab8598103612c2ac9263699d0cacef076aac10640ef554d3ee8c59d14bb2a741d0a7e05538cc966b8551419085663eaa591a378a344c58d00aef3610e6187997958c0981967730cec7341b36106b14a0aa4a4db1d208a92b08479b5f8a32b47246f9d33cd41f3e502c199d106b0424fd201c703ab73fc0a0a322fd87ad950e5f41004a17a8d23b6e776a9d60153f33e7dd66a05c19055925ae0dc31ce47ed18a4e0fa5977a0790d740cbb29cc711c2fe00007e580a145e68cdf4303122294e6fd1292f48b281bab262955f00b0f3a85b85dce8a8862924c06c5f88c0523e1dc33b4800e25c949107154777e61606e3d600484944880ece5c1575eb46b122a14490aeea637997c2f2e80796b2f964df67385b5f82f154aa4cb69a7aedc4f2769d1234562fd1874c6e422473b1c4710cbd240f912389b75a15c5c54497bd865cb82190f87387b33ebf504fa179bd2dd30aaecc1a5864dca0ea87a78c51b7b783f242ccc7ec954e1bc9d7c1f06979b775c3f4281d103f6ec33245289c9405fa6eff3560353a84710a10dced848510c642422712203d6887631eec64b97e3cc0120c6f32244410eb7d76f6006e2f25e43428542600216ba6f7ef32a86b645b4765d2811b204c518693699a2e9e99b9fc0eeda733ae7452f92fe3c37fe9103aecceec1ec1589eecec0f809431c652fcc6d6f8cba27ee0ea5664ec6e28163dc062cea6eae7649ed8c20497892c67032c7e2300dfaa585c63006204e4398674566fd8558ac0eccee6fe6778c2a804966180e04c4e8a213266ceccbd8bdc9620945f6f420de628ef6c48d4848034aa029e004ac01d8cf2a8aaf42e2635af42a2ac80e2a7ecf84358d94890c3c8dad34c8c598100a34328efcf4cdcc86efa4b1c766500541c28c7c2eaf607b2fdcfd8ba6b56b6ca6ee76ed4f82ae01d85e2a0cd56e24d78a8c556864e3468c1148d884a6004d6a4194a0b2ec148c2bc4c61d81be6f8d0cbf4e8058e7128f4026124c5a6702984dcaea2b81c4a3ef70a3813e15153e6c88708b0be8fe8188180170c5c5e0c18cf0618918d183008a87180981e0c228c1fd8a323a8e76a7635aa6e98ac92bf822e50434c7e2efc4302c0c52ad8b7415c8485baf28242ca8aa8186e427510b0ba6cd13d20a0ca0a68ba8f30568368980b100b0c084304a02e83ba351fba07147aed100012af24d29a68c2ff65a4a32eb2bdcd226ec78ca3ceb47788282104f84a2bf8f4ce849eeeea9c1180ddc79058a5cc9f6c02f84809500624dca0d6976f8c648558160e0210c1beef62a40664283acff005c388301a513f6d31d09c848ec84cfe4e6cef205a6ba204166cca189122b9ce3cb4881a081518851fc97f432c1802840819b6e4af7aa22ec28da3096dc290ea0ca974ad8ccc0048632861180db65a94d4e881005586295c40009a2b2e18b4619c9b8b943d8f81720ea0a8caeee82f21492250f86362c8c9b6a6e7c4598248c04b664ea28c026aa2274f8437aca2a281a697c9cc31416eb0cfb24d8d143227b493aed2000522e00010ea2108c06e2d722b05a4be883ccf834a3d23666e245ce780004a5227c4ce4bf1e7a7742a822830e31ae981d48d8fee38edea734c444f81b8ba11a0b5928e6c9c8cabc2ac582851c494d8956580904ac4498228e313929d9d58004e62c663b4dcc22ccf65f6b1c160cb0b84f3103431cb3474ef41970c545606ac8ce1e9f70d2cfe02311216a4778774290684bd65c494883cef6659219bfe816db9fac5cad9ada9f7050ca496e2982189821be2c2e73c13003a321352339dfc70107669cee6ae69a4c948da2848d8858ff8d94bc0cb2e1010c091ee495212c390da192101945ea0c9591c4d2a3324a4c8c404dd4e00ddacf8580634180d01efa262f1938652c3de4f4c48ea6bb2036c44959334b74772fc09c925eb84cb2739afca6e7f6d4584661e19143113052831c85910e1ec86e8385210de278006625b6e76964580940cc512fc0c04e6454c10a6eabcd592fcfa5720f31fd81b87c4674e54afc39488533a8f2b85b783880187e8e5031c07e08048ab84c0854186af2e009c72254c341ca7744640c0314b8c591648f6aee99a6e9540ac12b9ca29670282e65579e2c1ceb19231f3aac1b90200814674f842500949e0be9628591b581f88d2529bc17f63a0876e00ca41c93881be4f93a2e18016ab8164c565293218e41e63f4548e546b58841590aec90a4824af42949cac560ff8921acab2a3e05480657f47e1cb18fe7d851c0810b2fe0fa57664a2b8c904859d5a2024f667a3a528262ab61b680001c1d88cc7eca44f5200c71c2784e504ca65d5cbe6a6e396228b8c88d3329d56e6721f70b3c225af5ade58d7f6198dccd00bf4b414288154315a48d60748321009b1c42d513b07ba53887a73eed19698fead9c2148debac7815a5f537cd284254d65bcdc503e454565dcacdadcc2d865e246506d988fef188002804000fda9c19aa28db67699d52e1a4ccb132c084709004de485222da821b80896b84842acde1d2ce763a0afc8ac8c1094134a0a9a9f58df166c8dc1603d2d0cd22ba508433c73c69c58097800443048c59a3ca84c10c59ef41c95de5094695a31314e31a4535e6282a81147c44c299d0f5498000fcf18a46405daa72544191c5f20c0dca1d835d0243f8692c869ee836779cededee84bb8648058f30814a4140c331314e11e3aa4a3ac1a1775734cd2f1a1994620f4f426dcb5d8a24fc4046a2b166a4f411c4acdcf2bc0ae63ccfb2b74e59e84c16a4a3a2f72626465ff4699af917603216081ac8ccc0560b446448a5358bb52ede6d0cd02c2a4a45a46e99476bc5a98f7cd9a6480ada4574cee621db9c81a9642f4210c869a6a06e11739a1017aa02afd4a9b196ea7a4a243c848014a4e903c1f83da4d8f9428209af12b64dd4905c0a77909afac2d5b6ecaa388eb13d8ede1d83b84384c2503449d9052238a394c365210d108d5c25e95586c30e56fcb9c8d9a58cd93d8c0dc4539293c3120e9a06b96ac0a447e6198522c34a18f097ce1ece48e00bf8160e51508dbae389cd9e86f1bcd1d8d69e76fd8aedb5a86631c1be74cfa6945b1c911f52598a92dcadad3403c238aaacb5aca61eccad7f6a134e075858de8481e98a4d811c7898ed080cede11f23e23454284114a66bb484da20598fc0a157c1f418242e9fb49f2b84d4856133c2e06a4f53fdcaf4cf80248f6536e9d2822c07e1f56521c32cc04c583efb6d455bc64100085000f23f0500be4ca461d2fed24fbda1ee092c062a498c1ada6e50f42e0cdf2b489e2f409b88865790f8e00712ee6de52ca84cc4a6481edc3c921000841d8f59080f022d83d885e79cd5c1602e2f9485d4f43f93882a398c2d9232aa29fac2e9786942fe7e17b2a660a6fe3278b16f24af0dbc7632d0e3ecf14e3fb11c8b3e738ed1620428a24a0e80bbf4a137954aa0de1e25e332cd580745da74d83ea0a8e646a3005adf335a0d9dcd340c3402e0aa3e507356a25d213cd24a90a04fac0f8dea600af3148e35e84bc9e1dcc0b49f3ce3c71adf8fdce3c4fc598825c8caf0d8a43886b08e954a4495ee841f4fe35f67faf60eba859b1d6f908c62903d3d89e32ba71add389a654510160df3bc066c674e2b48c1633a97f8664932e3c3d8cbae667349bcb2b56a3527be5a40c08c6394a0671bfecc44da190c99c1805c4a7a0c9115250e962a43838ad235fd4eb426156137283caeace1e1bf70a5ada6f347d81b577ee74f7d7f421b764890d3a792ab5802e649ee4fa4397deb7dc5845b20d79068bcac05d23dc548ee441ea0fe2ac0574b92ef26188ac75c0c4e627be7788f89b3b8c01530360292d08932caf0e88f068a26749a9b46a96828e8b7e120e7856cd5515b02f1dcdc4bd42ed1a181e2296a9313b68bb59920e9ed63af2106580a0040c65a707d639b8df56192dba2014d644eb9c7c8fb2cae2c183720b8cd78dcce767e0b946f584cf8ce4bb2bd6aea1f66755ff05e62802ca2547dca019dea0653197074d3d866434c5c4a03c3cf94adc931d60833b9c28a65639da0cd2d48eb458d6952fa52aca01dc03c7fe06206246a481a890d5b9dcc3aba5431084358560e8bbd81e4c028960027f6b8c47801de3bc86c44de1a44e7325b3d880cabbd6710c810454824016faa8acfbe6b583c7c487c7c3b9c0237b82fca6e1beeba20e3f8ce1a07f19a303e403df40810629ca4c9294442c058882eeeb48753b74eb3c03c640d2929ed2b4838e6194ee61990176dbb251190c5aa48a59b17c1e2e3c0c018c6e62fbea5602a7dd5c2fb7b62a895ca45a216020f6fd42aad05a20f6c2008201d36dce93ccab954ae4becc05989b88546d64f3d586fa0588a431635aae08907c9ce6db5048999da39523394b765b48c7b6d2de4467b10cf4b4f41e44997c49cc5aceda97cce68ed6f6d4334616a7818a24d8c00624729c0b5e9ec4c091a4130c4e0bbb645c4913b582b6b66fca0bb081992bca5a33f7b92378f09d8130537eaf2e0438b70878b8e3088ce344b771050dc64c0672170e9c32cd3078053090c8200cf7d2ac2a2c3216d0d906b0440d80a407801d800006000245308145cf8cf670170550300d2f7e0fcfe686b0e2f6a8040170570280370300ae84c8ad0050cd0d507400c0fa1ec004001c1d072cd630b0af07a6650720ecf9d0f23584a30f18000e47331001f09935efc01468def5a0500500c08100b18550550ddaac08b0fc0c10e88c000b000a550168b58fef6e0550128b68000cc550969000fa860000d20006a0006c20090d000ea200128490dc4ae0b9f8c085f0001a0009cbc0a46a46338500e105ef64042f36f64094d6425a838030030a1c830a8106b629f7f0980aef940cb0ab0f185304c8814ae0598430860dd5f18b9f85084d5bf3bffc0d26e80fd6f1815f47f9bf150a7f1f18f4e434d807f37f9406b0c01018130ebf4c8b1f50070a48418078c2c400002c84d2a12918ac05536f7b0e985c81f1ffb58ce5871c0b027bc6003ef3f7807d3a0eff4e810f0790dff5102ffdffe8009802da01204c87006402c00d009659c80e01a2001b1e98c00e7f30f8681e30c00800033004b018683f427fc8811bf7c0758d081f18286a135e819206106902041ac044041f0501680ccfab8107e6ff0ff8ec0f0122031065038819209100102c86440db42802c813b008040a13415ef6f62611c20a305a04e82101480b9061814621004042364dd44a09801703faa050350650034165f428a4582c0c20d7fba8308892007fa2b09fe410e205b02381980e0089c06583e0cb82082f41120d10584318117f1605c40e21a207206982a81ce41a0613540046439037bc4382251b0678365e1806e799c9921d6d7480825bded0c75daa40300360ca02e82001e90a6432c19818c003f9e424401307081401e30a30ca022b1f80a1f29858038c1140a286c034a1edd0a86a02aa1d60ce0439187e1d07acb940010dc01a01cb01dee0617795015386801ec2ba1ade640200000) REPL to test, but you'll need to download the generated PDF as the REPL doesn't support interacting with links.
**Expected behavior**
I would expect to be taken to the first page. But instead, I'm taken to the last page.
**Desktop:**
- OS: N/A
- Browser: N/A
- React-pdf version: 3.1.12
Contributor guide
Assessment
This issue has not been assessed yet.