Mention link and button in fundamentals

Author: satya164

versioned_docs/version-7.x/navigating.md

@@ -15,28 +15,89 @@ If this was a web browser, we'd be able to write something like this:
 <a href="details.html">Go to Details</a>
 ```
 
-Another way to write this would be:
+It's also possible to programmatically change the URL using JavaScript:
 
 ```js
-<a
-  onClick={() => {
-    window.location.href = 'details.html';
-  }}
->
-  Go to Details
-</a>
+window.location.href = 'details.html';
 ```
 
-We'll do something similar to the latter, but rather than using a `window.location` global, we'll use the `navigation` object that's accessible in our screen components.
+So how do we do this in React Navigation? There are two main ways to navigate between screens in React Navigation:
 
-## Navigating to a new screen
+## Using `Link` or `Button` components
+
+The simplest way to navigate is by using the [`Link`](link.md) component from `@react-navigation/native` or the [`Button`](elements.md#button) component from `@react-navigation/elements`:
+
+```js name="Navigation with Link and Button" snack static2dynamic
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// highlight-start
+import { Link } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
+// highlight-end
+
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home Screen</Text>
+      // highlight-start
+      <Link screen="Details">Go to Details</Link>
+      <Button screen="Details">Go to Details</Button>
+      // highlight-end
+    </View>
+  );
+}
+
+function DetailsScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Details Screen</Text>
+    </View>
+  );
+}
+
+const RootStack = createNativeStackNavigator({
+  initialRouteName: 'Home',
+  screens: {
+    Home: HomeScreen,
+    Details: DetailsScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+  return <Navigation />;
+}
+```
+
+Let's break this down:
+
+- The `Link` and `Button` components accept a `screen` prop that specifies the name of the screen to navigate to when pressed.
+- When the user taps on the `Link` or `Button`, React Navigation automatically navigates to the specified screen.
+
+[When using on the web](web-support.md), they also render as anchor tags (`<a>`) with `href` attribute, which is essential to preserve native browser behaviors like "Right click → Open link in new tab".
+
+:::note
+
+The built-in `Link` and `Button` components come with their own styling. But it's likely that you'll want to create your own custom link or button component to match your app's design. See [`useLinkProps`](use-link-props.md) hook on how to create custom link components.
+
+:::
+
+## Using the `navigation` object
+
+Another way to navigate is by using the `navigation` object. This method gives you more control over when and how navigation happens.
+
+The `navigation` object is available in your screen components through the [`useNavigation`](use-navigation.md) hook:
 
 ```js name="Navigating to a new screen" snack static2dynamic
 // codeblock-focus-start
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import {
   createStaticNavigation,
+  // highlight-next-line
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -90,19 +151,19 @@ export default function App() {
 
 Let's break this down:
 
-- `navigation` - the `navigation` object is returned from the [`useNavigation`](use-navigation.md) hook (more about this later in ["The navigation object in depth"](navigation-object.md)).
-- `navigate('Details')` - we call the `navigate` function (on the `navigation` object &mdash; naming is hard!) with the name of the route that we'd like to move the user to.
+- The `navigation` object is returned from the [`useNavigation`](use-navigation.md) hook (more about this later in ["The navigation object in depth"](navigation-object.md)).
+- We call the `navigate` function (on the `navigation` object &mdash; naming is hard!) with the name of the route that we'd like to move the user to.
 
 :::note
 
-If we call `navigation.navigate` with a route name that we haven't defined in a navigator, it'll print an error in development builds and nothing will happen in production builds. Said another way, we can only navigate to routes that have been defined on our navigator &mdash; we cannot navigate to an arbitrary component.
+If you call `navigation.navigate` with a route name that you haven't defined in your navigator, you'll see an error in development builds and nothing will happen in production builds. You can only navigate to routes that have been defined in your navigator.
 
 :::
 
-So we now have a stack with two routes: 1) the `Home` route 2) the `Details` route. What would happen if we navigated to the `Details` route again, from the `Details` screen?
-
 ## Navigate to a screen multiple times
 
+So we now have a stack with two routes: the `Home` route and the `Details` route. What would happen if we navigated to the `Details` route again from the `Details` screen?
+
 ```js name="Navigate to a screen multiple times" snack static2dynamic
 import * as React from 'react';
 import { View, Text } from 'react-native';
@@ -289,11 +350,14 @@ export default function App() {
 
 :::note
 
-On Android, React Navigation hooks in to the hardware back button and fires the `goBack()` function for you when the user presses it, so it behaves as the user would expect.
+On Android, React Navigation hooks into the hardware back button and automatically calls `goBack()` when the user presses it, so it behaves as expected.
 
 :::
 
-Another common requirement is to be able to go back _multiple_ screens -- for example, if you are several screens deep in a stack and want to dismiss all of them to go back to the first screen. In this case, we know that we want to go back to `Home` so we can use `popTo('Home')`. Another alternative would be `navigation.popToTop()`, which goes back to the first screen in the stack.
+Sometimes you need to go back _multiple_ screens at once. For example, if you're several screens deep in a stack and want to go back to the first screen. You have two options:
+
+- `navigation.popTo('Home')` - Go back to a specific screen (in this case, Home)
+- `navigation.popToTop()` - Go back to the first screen in the stack
 
 ```js name="Going back to specific screen" snack static2dynamic
 import * as React from 'react';
@@ -361,6 +425,8 @@ export default function App() {
 
 ## Summary
 
+- [`Link`](link.md) and [`Button`](elements.md#button) components can be used to navigate between screens declaratively.
+- We can use [`useLinkProps`](use-link-props.md) to create our own link components.
 - [`navigation.navigate('RouteName')`](navigation-object.md#navigate) pushes a new route to the native stack navigator if you're not already on that route.
 - We can call [`navigation.push('RouteName')`](stack-actions.md#push) as many times as we like and it will continue pushing routes.
 - The header bar will automatically show a back button, but you can programmatically go back by calling [`navigation.goBack()`](navigation-object.md#goback). On Android, the hardware back button just works as expected.