How to add a link that jumps to another slide page

[lorniu]

Thanks for your excellent work, spectacle is great, I like it so much.

As an Emacs user, I wrote ox-spectacle to product spectacle slideshows. It is based on Emacs org-mode's export engine, which can greatly simplify the creation of slideshows with spectacle. The way ox-spectacle works is to translate the org-marked file into spectacle one-page html.

I have several problems then. One of them is that, how to add a link that jumps to another slide page?

I wrote a component like this:

const { Slide, Deck, Link, Text } = Spectacle;
import htm from 'https://unpkg.com/htm@^3?module';
const html = htm.bind(React.createElement);

const MyLink = React.forwardRef((props, ref) => {
    const { skipTo } = React.useContext(Spectacle.DeckContext);
    return html`
    <${Link} ref=${ref} ...${props}
      onClick=${e => { e.preventDefault(); skipTo({slideIndex: props.id}) }}>
    </${Link}>`;
});

const Slides = () => html`
  <${Deck}>
    <${Slide}>
        <Text>Slide One</Text>
    </${Slide}>
    <${Slide}>
      <${MyLink} id="0">Slide 2. Click to jump to Slide 1</${MyLink}>
    </${Slide}>
  </${Deck}>`;

ReactDOM.createRoot(document.getElementById('root')).render(html`<${Slides}/>`);

It does do the jump, but the window.location not sync after jump. Forgive my poor knowledge about ReactJS, I really don't know why.

Please help me, or tell me any better way to do the job.

Thanks.

[ebertmi]

You can have a look at the progress bar component and the skipTo action. https://github.com/FormidableLabs/spectacle/blob/main/packages/spectacle/src/components/progress.tsx

[lorniu]

The above MyLink is written with reference to Progress. I don't know if I missed something, the jump is okay, but the url remains unchanged after the jump. So very puzzled. Help, thanks.