# 3 ways to link in React

<details>

<summary><code>Link</code> - React Router Component</summary>

**YES, when:**

* Navigating **within** the React SPA (Single Page App)
* Want **client-side routing** with no page reload
* Want SEO-friendly links

{% hint style="success" %}
**Pros:**

* Keeps app fast
* No page reload
* Preserves app state
* Can pass extra props like `state` or apply `className` for styling
  {% endhint %}

{% code overflow="wrap" lineNumbers="true" %}

```typescript
import { Link } from 'react-router-dom';

<Link to="/">
  <button>Go to Homepage</button>
</Link>
```

{% endcode %}

</details>

<details>

<summary><code>useNavigate()</code> - React Router Hook</summary>

**YES, when:**

* Want to programmatically navigate (e.g. **after submitting a form**, or in a button click handler)
* You need **logic-based navigation** (e.g. based on a condition)

{% code overflow="wrap" lineNumbers="true" %}

```typescript
import { useNavigate } from 'react-router-dom';

const Component = () => {
  const navigate = useNavigate();

  const handleSubmit = () => {
    // after logic, go to homepage
    navigate('/');
  };

  return <button onClick={handleSubmit}>Go home</button>;
};
```

{% endcode %}

</details>

<details>

<summary><code>&#x3C;a href=""></code> - Native HTML Link</summary>

**YES, when:**

* Linking to **external websites**
* Linking to **non-SPA\* pages**
* You **don’t** use React Router (e.g. plain HTML or basic React without routing)

{% hint style="warning" %}
**NO, when:**

Internal routing in a React app — it **causes full page reloads** (loses React state, slower)
{% endhint %}

```
<a href="https://example.com">Visit Example</a>
```

</details>

| Full page reload | ✅ Yes              | ❌ No  | ❌ No                 |
| ---------------- | ------------------ | ----- | -------------------- |
| Internal routing | 🚫 Not recommended | ✅ Yes | ✅ Yes                |
| External links   | ✅ Yes              | 🚫 No | 🚫 No                |
| Used in JSX      | ✅ Yes              | ✅ Yes | ✅ (inside functions) |
| Used in logic    | 🚫 No              | 🚫 No | ✅ Yes                |