Figma Support Forum

How to work with react-router-dom in Figma plugin

When I use react-router-dom in Figma plugin, the code didn’t render the component, is it because I used a wrong path, anyone has any idea?

    <Router>
        <Switch>
            <Route path="/">
                <Homepage />
            </Route>
        </Switch>
    </Router>

Router is used when switching between different webpages. Plugin iframe is only one page, so you can’t use this here. You need to hide/show different elements via something else. Alternatively you can host this UI somewhere as a website and show it in the iframe, the router should work in this case.

If I host the UI somewhere else, does those messaging between plugin code work as expected?

Yes.

@Gleb @Bahtiyar I’m not sure this solution is necessarily correct. You should be able to use the MemoryRouter from react-router-dom if I’m not mistaken to get a multi-page layout working in the way you expect.

i.e. use import { MemoryRouter as Router } from "react-router-dom". This is how I do it with a Svelte library that is based on React Router and how I’ve used React Router in the past with Chrome Extension popups which have similar limitations to the Figma plugin iframe.

More info here: React Router: Declarative Routing for React.js

1 Like

@Emile_Paffard-Wray MemoryRouter worked for me!