I’ve been building React applications for years, and I keep noticing a common friction point. My components know about the application’s state, and my router knows about the navigation, but they often don’t talk to each other well. I end up with logic scattered everywhere—a useEffect in a component to redirect on login, a conditional check in a route guard, state resetting awkwardly on page changes. It felt messy. That’s what led me to look closely at combining Zustand and React Router. This isn’t about using one or the other; it’s about making them work together so your app’s logic flows smoothly from state to screen.
Zustand gives you a straightforward way to manage state. You create a store, and any component can use it. No providers to wrap your app in, no complex boilerplate. React Router, on the other hand, manages the map of your application. It controls what the user sees based on the URL. The magic happens when you connect the map to the territory—when your application’s internal state can influence the journey, and the journey can update the internal state.
So, how do we start? The goal is to let your Zustand store be aware of the router, and vice-versa. One effective method is to bring the router’s navigation function into your store. This gives any piece of your state logic the power to change the route.
// store.js
import { create } from 'zustand';
export const useAppStore = create((set, get) => ({
user: null,
cart: [],
// A placeholder for the router's navigate function
navigate: null,
setNavigate: (navigateFn) => set({ navigate: navigateFn }),
login: async (credentials) => {
const user = await api.login(credentials);
set({ user });
// Use the stored navigate function after login
const { navigate } = get();
if (navigate) {
navigate('/dashboard');
}
},
addToCart: (product) => {
set((state) => ({ cart: [...state.cart, product] }));
// Navigate to cart after adding an item
const { navigate } = get();
if (navigate && get().cart.length === 0) {
navigate('/cart');
}
},
}));You then need to inject the actual navigation function from React Router into this store when your app starts. This is typically done at the root level of your application.
// App.jsx
import { useNavigate } from 'react-router-dom';
import { useAppStore } from './store';
import { useEffect } from 'react';
function App() {
const navigate = useNavigate();
const setNavigate = useAppStore((state) => state.setNavigate);
useEffect(() => {
setNavigate(navigate);
}, [navigate, setNavigate]);
// ... rest of your app routing
}Now, your store can cause navigation. But what about the other direction? Can a route change update your state? Absolutely. Consider a multi-step form or a wizard. The URL might reflect the current step (/form/step1, /form/step2). You can have your store listen to these changes and keep the current step in sync with the global state.
// formStore.js
import { create } from 'zustand';
export const useFormStore = create((set) => ({
currentStep: 'step1',
formData: {},
setStepFromUrl: (stepId) => set({ currentStep: stepId }),
updateFormData: (data) => {
set((state) => ({
formData: { ...state.formData, ...data }
}));
},
}));A component tied to a route can then update this store when it loads.
// StepComponent.jsx
import { useParams } from 'react-router-dom';
import { useFormStore } from './formStore';
import { useEffect } from 'react';
function StepComponent() {
const { stepId } = useParams();
const setStepFromUrl = useFormStore((state) => state.setStepFromUrl);
useEffect(() => {
if (stepId) {
setStepFromUrl(stepId);
}
}, [stepId, setStepFromUrl]);
// ... component logic
}This creates a two-way street. The store can change the route (like after login), and the route can inform the store (like setting the current step). It centralizes navigation logic that depends on state. Need to check if a user can access a settings page? That permission check and redirect can live in one place in your store, not duplicated in a component and a route loader.
Have you ever had to pass a callback function down through three components just so a deeply nested button could redirect the user? This pattern eliminates that. The button can simply call a store action like completePurchase(), and that action can handle the final state update and the navigation to the order confirmation page.
The benefits are clear. Your code becomes easier to reason about. Navigation triggered by state changes is explicit and testable—you can test your store’s login action and assert it calls navigate without rendering a single component. It also reduces clutter in your components. They can focus on presenting UI and handling local interactions, while the complex flow of “do this, then go here” is managed centrally.
Think about your own projects. Where are the places you’ve written if (user) navigate('/home') inside a useEffect? Could that logic belong to the store that manages the user itself? This integration encourages that kind of clean separation.
Of course, it’s not a silver bullet. For very simple apps, it might be overkill. The initial setup requires that careful wiring of the navigate function. But for applications with complex, state-dependent journeys—like e-commerce checkouts, onboarding flows, or dashboards with conditional views—this combination is incredibly powerful. It turns your state management and your router into coordinated partners, guiding users through your application with intention.
I encourage you to try this pattern in your next React project. Start small: connect your auth store to redirect on login and logout. Feel how much cleaner it is. If you found this approach helpful, or have your own tips for managing navigation flow, share your thoughts in the comments below. Let’s keep the conversation going.
As a best-selling author, I invite you to explore my books on Amazon. Don’t forget to follow me on Medium and show your support. Thank you! Your support means the world!
101 Books
101 Books is an AI-driven publishing company co-founded by author Aarav Joshi. By leveraging advanced AI technology, we keep our publishing costs incredibly low—some books are priced as low as $4—making quality knowledge accessible to everyone.
Check out our book Golang Clean Code available on Amazon.
Stay tuned for updates and exciting news. When shopping for books, search for Aarav Joshi to find more of our titles. Use the provided link to enjoy special discounts!
📘 Checkout my latest ebook for free on my channel!
Be sure to like, share, comment, and subscribe to the channel!
Our Creations
Be sure to check out our creations:
Investor Central | Investor Central Spanish | Investor Central German | Smart Living | Epochs & Echoes | Puzzling Mysteries | Hindutva | Elite Dev | JS Schools
We are on Medium
Tech Koala Insights | Epochs & Echoes World | Investor Central Medium | Puzzling Mysteries Medium | Science & Epochs Medium | Modern Hindutva
