Figma-Generated React Code Won’t Go Back? Set Up React Router
React code from Figma is a single-page app with one fixed URL. Learn how to fix back button, bookmarking, and sharing issues with React Router and server config.
When you generate React code from Figma using plugins like Anima or Locofy, you get clean components right away. But when you run it in the browser, something feels off. The URL doesn’t change when navigating between pages, and the back button doesn’t work. This guide covers how to fix these issues by setting up React Router.
Why Figma Code Becomes an SPA
Figma is fundamentally a design and UI prototyping tool. Code generation plugins focus on converting visual elements into React components, so they don’t automatically implement routing functionality.
React itself is built as an SPA (Single Page Application) by default. It dynamically swaps content within a single index.html file using JavaScript. Without proper routing, this structure causes several problems:
- Browser back/forward buttons don’t work
- You can’t bookmark specific pages
- Shared links always show the home screen
- Refreshing the page resets everything to the start
What React Router Solves
React Router is a library that connects URLs to components using the browser’s History API. When a user navigates to /about, it shows the About component. Navigate to /products, and it shows the Products component.
While there’s no official React routing library, React Router has become the de facto standard. As of 2026, React Router v6 remains the primary version, and upgrading to v7 is straightforward since it’s a non-breaking upgrade. V6 offers clean syntax and features like the Data API.
Can You Set Up React Router Directly in Figma?
The short answer is that most Figma plugins don’t automatically set up React Router. Tools like Anima, Locofy, and Builder.io focus on converting individual components or pages to HTML/CSS/JS. Routing logic varies depending on project structure and business requirements, so developers need to configure it themselves.
That said, some of Locofy’s premium plans reportedly generate React Router code based on Figma interactions. I haven’t tested this personally, but they offer options to automatically connect multi-screen flows, so it’s worth checking out if you’re interested.
Here’s a breakdown of what you can do in Figma versus what requires a development environment:
| Task | Figma Plugin | VS Code/Dev Environment |
|---|---|---|
| Generate component code | O | – |
| Apply styles (CSS/Tailwind) | O | – |
| Install React Router | X | O |
| Configure route paths | X | O |
| Set up server deployment | X | O |
Asking AI to Set Up React Router in VS Code
If you’re using AI coding assistants like GitHub Copilot, Cursor, or Claude, you can speed up React Router configuration. Here are some prompts you can actually use.
Basic Setup Prompt
Install React Router v6 in this React project and set up basic routing. Current component structure:
- Home.jsx (main page)
- About.jsx (about page)
- Products.jsx (product list)
- ProductDetail.jsx (product detail, /products/:id format)
Use BrowserRouter and route non-existent paths to a 404 page.
Navigation Addition Prompt
Add a top navigation bar to the current project.
- Should have Home, About, Products menu items
- Currently active menu should be styled differently
- Use NavLink component
Applying Routing to Existing Code Prompt
Connect these Figma-generated components with React Router. Replace button clicks with Link components to navigate to respective pages, and show an example of programmatic navigation using the useNavigate hook.
React Router Basic Setup Code
If you’re setting it up manually without AI help, follow these steps.
Step 1: Installation
Install the react-router-dom package from your terminal.
npm install react-router-dom
Step 2: Router Configuration
In main.jsx or App.jsx, wrap your app with BrowserRouter and define paths using Routes and Route.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import NotFound from './pages/NotFound';
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/products" element={<Products />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}</p>
<p class="font-claude-response-body break-words whitespace-pre-wrap leading-[1.7]">export default App;
Step 3: Connecting Links
Replace existing buttons or anchor tags with Link components.
import { Link } from 'react-router-dom';
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">function Navigation() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/products">Products</Link>
</nav>
);
}
Why Server Configuration Is Needed for Deployment
React Router works fine when testing locally. But after deploying to an actual server, directly accessing URLs like /about or refreshing the page results in a 404 error.
The reason is simple. From the server’s perspective, it’s looking for an about.html file at the /about path, but SPAs only have a single index.html. You need to configure the server to route all requests to index.html so React Router can handle the URLs.
Nginx Server Configuration
If you’re using Nginx, add the try_files directive to your config file. The config file is usually located in /etc/nginx/sites-available/ or /etc/nginx/conf.d/.
server {
listen 80;
server_name your-domain.com;
root /var/www/your-app;
index index.html;
<div class="relative group/copy bg-bg-000/50 border-0.5 border-border-400 rounded-lg">
<div class="sticky opacity-0 group-hover/copy:opacity-100 top-2 py-2 h-12 w-0 float-right">
<div class="absolute right-0 h-8 px-2 items-center inline-flex z-10"><button class="inline-flex
items-center
justify-center
relative
shrink-0
can-focus
select-none
disabled:pointer-events-none
disabled:opacity-50
disabled:shadow-none
disabled:drop-shadow-none border-transparent
transition
font-base
duration-300
ease-[cubic-bezier(0.165,0.85,0.45,1)] h-8 w-8 rounded-md active:scale-95 backdrop-blur-md Button_ghost__BUAoh" type="button" aria-label="클립보드에 복사" data-state="closed">
<div class="relative">
<div class="transition-all opacity-100 scale-100" style="width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="transition-all opacity-100 scale-100" aria-hidden="true" style="flex-shrink: 0;"><path d="M12.5 3C13.3284 3 14 3.67157 14 4.5V6H15.5C16.3284 6 17 6.67157 17 7.5V15.5C17 16.3284 16.3284 17 15.5 17H7.5C6.67157 17 6 16.3284 6 15.5V14H4.5C3.67157 14 3 13.3284 3 12.5V4.5C3 3.67157 3.67157 3 4.5 3H12.5ZM14 12.5C14 13.3284 13.3284 14 12.5 14H7V15.5C7 15.7761 7.22386 16 7.5 16H15.5C15.7761 16 16 15.7761 16 15.5V7.5C16 7.22386 15.7761 7 15.5 7H14V12.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5V12.5C4 12.7761 4.22386 13 4.5 13H12.5C12.7761 13 13 12.7761 13 12.5V4.5C13 4.22386 12.7761 4 12.5 4H4.5Z"></path></svg></div>
<div class="absolute top-0 left-0 transition-all opacity-0 scale-50" style="width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="absolute top-0 left-0 transition-all opacity-0 scale-50" aria-hidden="true" style="flex-shrink: 0;"><path d="M15.1883 5.10908C15.3699 4.96398 15.6346 4.96153 15.8202 5.11592C16.0056 5.27067 16.0504 5.53125 15.9403 5.73605L15.8836 5.82003L8.38354 14.8202C8.29361 14.9279 8.16242 14.9925 8.02221 14.9989C7.88203 15.0051 7.74545 14.9526 7.64622 14.8534L4.14617 11.3533L4.08172 11.2752C3.95384 11.0811 3.97542 10.817 4.14617 10.6463C4.31693 10.4755 4.58105 10.4539 4.77509 10.5818L4.85321 10.6463L7.96556 13.7586L15.1161 5.1794L15.1883 5.10908Z"></path></svg></div>
</div>
</button></div>
</div>
<div>
<pre class="code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed" style="background: transparent; color: rgb(171, 178, 191); text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; font-family: var(--font-mono); direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto; border-radius: 0.3em;"><code style="background: transparent; color: rgb(171, 178, 191); text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; font-family: var(--font-mono); direction: ltr; text-align: left; white-space: pre-wrap; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none;"><span><span>location / {
</span></span><span> try_files $uri $uri/ /index.html;
</span><span>}</span></code></pre>
</div>
</div>
<p class="font-claude-response-body break-words whitespace-pre-wrap leading-[1.7]">}
The try_files $uri $uri/ /index.html configuration means: first check if the requested file exists, then check for a directory, and if neither exists, return index.html.
Restart Nginx after making changes.
sudo nginx -t sudo systemctl restart nginx
Apache Server Configuration
For Apache servers, create an .htaccess file in your React app’s root directory (the build folder).
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . /index.html [L] </IfModule>
Apache’s rewrite module must be enabled. You can check and enable the module with these commands.
sudo a2enmod rewrite sudo systemctl restart apache2
Cloud Platforms Like Vercel and Netlify
Platforms like Vercel and Netlify are optimized for SPA hosting, so React Router usually works without additional configuration. If issues arise, add a config file to your project root.
For Vercel, create a vercel.json file.
{ "rewrites": [ { "source": "/(.*)", "destination": "/" } ] }
For Netlify, create a _redirects file in the public folder.
/* /index.html 200
Wrap-Up
Figma delivers UI quality fast, but turning it into a real web app requires React Router and server configuration. Even something as simple as a broken back button makes users think, “Something’s off with this site.” It only takes 5 minutes to install React Router and another 5 minutes for server setup. A 10-minute investment completely transforms the user experience, so definitely give it a try.