# Routing

Berry routing system is based on [react-router](https://reacttraining.com/react-router/) and its package [react-router-dom,](https://reacttraining.com/react-router/web/guides/quick-start) it also uses code splitting for better performance.

## Configure route

Open `...\src\routes\index.jsx` You will find the example code below. In the code below, we have shown four different routes. **`<MainRoutes/>`** This is the main layout routing you see after login.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
...
...

// ===============|| ROUTING RENDER ||=================== //

export default function ThemeRoutes() {
    return useRoutes([
        { path: '/', element: <PagesLanding /> }, 
        AuthenticationRoutes, 
        LoginRoutes, 
        MainRoutes]);
}
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
...
...

// ===============|| ROUTING RENDER ||=================== //

export default function ThemeRoutes() {
    return useRoutes([
        { path: '/', element: <PagesLanding /> }, 
        AuthenticationRoutes, 
        LoginRoutes, 
        MainRoutes]);
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
For **NextJS**, it does not need any extra documentation since it is available [here](https://nextjs.org/docs/app/building-your-application/routing)
{% endhint %}