# Routing

Routing in Gravity depends on your architecture:

**Next.js**

* Routing is file-based inside the `/app` directory.
* Each folder or file in `/app` becomes a route automatically.
* Layouts, server actions, and views can be co-located for simpler imports and faster development.
* Permissions and private routes can be implemented using middleware or wrapper components around page components.
* Adding a new route is as simple as adding a new file. 

**Node.js**  

* Routing is handled **client-side** with `react-router-dom`.
* All routes are defined in `/client/src/routes` and should be imported in `/client/src/app/app.js`.

## **Defining a New Route (Node.js)**

Routes are defined in their respective file inside `/client/src/routes`. To add a new route,  import the [View](/gravity-native/components/view.md) component and add a new object to the route array.

```javascript
  {
    path: '/account/password',
    view: Password,
    layout: 'app',
    permission: 'user',
    title: 'Your Password'
  },
```

Public routes without a permission (such as the auth pages) are generated using the standard  `<Route>` component included with React Router.

```javascript
<Route path={ route.path } element={
  <View display={ route.view } layout={ route.layout } title={ route.title  } />
}/>
```

### Props

| name    | description                   |          |
| ------- | ----------------------------- | -------- |
| title   | page title                    | string   |
| layout  | name of view layout component | string   |
| display | view component with child     | function |

Gravity also contains a  **\<PrivateRoute>** component that enables you to protect routes with a user permission. **\<PrivateRoute>** accepts an optional **permission** prop.

```javascript
<Route path={ route.path } element={
  <PrivateRoute permission={ route.permission }>
    <View display={ route.view } layout={ route.layout } title={ route.title }/>
  </PrivateRoute>
}/>
```

## Code Splitting

If you would like to introduce route splitting to create separate bundles in your application, you can do so by simply lazy loading the view in the route file.

{% hint style="warning" %}
You will need to ensure that your relevant view component is exported as the default export for this to work.
{% endhint %}

```javascript
const Routes = [{
 path: '/dashboard',
 view: lazy(() => import('views/dashboard')),
 layout: 'app',
 permission: 'user',
 title: 'Your Dashboard'
}]
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/routing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.