Using Semantic UI React with React Router for Navigation

Creating a seamless navigation experience in your React application is crucial for user engagement. Today, let’s explore how to integrate Semantic UI React with React Router to build a professional and intuitive navigation system.

Setting Up Your Project

Before diving in, ensure you have both packages installed in your project. You can install them using npm:

npm install semantic-ui-react semantic-ui-css react-router-dom

Remember to import the Semantic UI CSS file in your root component to apply the default styles:

import 'semantic-ui-css/semantic.min.css'

Creating a Navigation Menu

Let’s start by building a responsive navigation menu using Semantic UI React’s Menu component combined with React Router’s Link component. The integration is straightforward and gives you a polished look out of the box.

Implementing Protected Routes

One common requirement in modern applications is implementing protected routes. Semantic UI React provides excellent feedback components like loaders and messages that we can use alongside React Router’s authentication flow.

Adding Active States and Transitions

The beauty of combining these libraries lies in their seamless integration. Semantic UI React’s Menu items can be easily styled to show active states, while React Router handles the routing logic.

Handling Mobile Navigation

Modern websites need to be mobile-responsive. Semantic UI React provides components like Sidebar and Responsive that work perfectly with React Router to create an adaptive navigation experience.

Best Practices and Common Pitfalls

When working with these libraries together, it’s important to maintain clean code and follow best practices. Always use React Router’s hooks like useLocation and useHistory for programmatic navigation, and leverage Semantic UI React’s built-in responsive features.