# Routing

## How to route

Use the built in hook from expo-router to handle navigation

```typescript
import { useRouter } from "expo-router";

export const FuncComponent = () => {
  const navigation = useRouter()
  
  // To navigate and allow going back
  const navigate = () => {
    navigation.navigate("/")
  }

  // to navigate WITHOUT allowing going back
  const replace = () => {
    navigation.replace("/")
  }

  // ...
}
```

{% hint style="info" %}
You should use navigation.replace in some cases. Especially when you want to foce the user to take some action. For example, when routing to the **auth screen** or the **paywall screen**. You might want to use navigation.replace to force the user to login/purchase instead of just hitting the back button.
{% endhint %}

## Automatic Routing

### What is Automatic Routing

Automatic Routing automatically routes your app to the correct screen based on the configs you have set up and the state of the app. If the user has not completed onboarding, it will display the onboarding screen. If the user has not logged, it will display the auth screen. Etc.

### How to use

Just use `navigation.replace("/")` to redirect to the root screen of the app. This page will automatically route you to the correct page based on the app state

### How it works

Automatic routing is handled by the `useEffect` in `/app/index.tsx`. 

* If `config.requireOnboarding` is set, but the user has not completed onboarding, redirect to the onboarding page
* if `config.requireAuth` is set, but the user is not logged in, redirect to the onboarding page
* After `signIn`, `signOut`, etc. are called, the page will redirect to the root screen `"/"` and then is rerouted to the correct page

### Custom Behavior

Modify the `useEffect` in `/app/index.tsx` to customize the behavior of the routing. For example, to force the user to authenticate before they do the onboarding, reorder the if statements

```typescript
// If the user is not logged in and we're requiring auth, navigate to the auth screen
if (!hasAuthCompleted && config.requireAuth) {
  navigation.replace("/auth")
  return
}

// If the user is not done with onboarding and we're requiring onboarding, navigate to the onboarding screen
if (!hasOnboardingCompleted && config.requireOnboarding) {
  navigation.replace("/onboarding")
  return
}
```