AlgoDaily - React Router

Home > Frontend Devlopment learning and exploring > Frontend Devlopment learning and exploring > React Router

Navigating with React Router

To navigate between different pages using React Router, you can use the Link component from react-router-dom. This component allows you to create links to different routes in your application.

Here's an example of how to use the Link component:

SNIPPET

1import { Link } from 'react-router-dom';
2
3const Home = () => {
4  return (
5    <div>
6      <h2>Home</h2>
7      <Link to="/about">Go to About</Link>
8    </div>
9  );
10};

In this example, we have a Link component that points to the /about route. When the user clicks on this link, they will be navigated to the About page.

You can also use the Link component with dynamic routes by passing route parameters:

SNIPPET

1import { Link } from 'react-router-dom';
2
3const User = ({ id }) => {
4  return (
5    <div>
6      <h2>User</h2>
7      <Link to={`/user/${id}`}>Go to User {id}</Link>
8    </div>
9  );
10};

In this example, the Link component is used with a dynamic route parameter id. The value of id will be passed as part of the route URL.

The Link component is a great way to handle navigation in your React Router application, allowing users to easily move between different pages.

xxxxxxxxxx
// The `Link` component is a great way to handle navigation in your React Router application, allowing users to easily move between different pages.
 
// Navigating with React Router
​
// To navigate between different pages using React Router, you can use the `Link` component from `react-router-dom`. This component allows you to create links to different routes in your application.
​
// Here's an example of how to use the `Link` component:
​
import { Link } from 'react-router-dom';
​
const Home = () => {
  return (
    <div>
      <h2>Home</h2>
      <Link to="/about">Go to About</Link>
    </div>
  );
};
​
// In this example, we have a `Link` component that points to the `/about` route. When the user clicks on this link, they will be navigated to the About page.
​
// You can also use the `Link` component with dynamic routes by passing route parameters:
​
import { Link } from 'react-router-dom';
​
const User = ({ id }) => {
  return (
    <div>
      <h2>User</h2>
      <Link to={`/user/${id}`}>Go to User {id}</Link>
    </div>

Navigating with React Router

Programming Categories

Popular Lessons