Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Creating Navigation Bars | React Router
Introduction to React
course content

Kursinnhold

Introduction to React

Introduction to React

1. Getting Started: ES6
2. Getting Started: JSX
3. React in Practice
4. React Components
5. Controlling Data & Content
6. Hooks
7. React Router

book
Creating Navigation Bars

The Link component can be used for creating hyperlinks to URL paths. Whenever dealing with React Routing, we use Link instead of <a href...>.

Following is an example of a navigation bar (drag the slider to view the code or preview):

Everything is enclosed in the BrowserRouter component as it should, and inside it, we have an unordered list that represents the navigation bar.

Each item of the navigation bar is a Link element. Whenever we click an item, it changes the URL.

However, that is not enough, we need the logic to render the relevant component based on the URL.

We use the <Routes> for rendering the relevant component.

If we look at the application, it should be something like this:

carousel-imgcarousel-imgcarousel-img
question mark

Which tag do we use for hyperlinks in React Routing?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 7. Kapittel 3

Spør AI

expand
ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

course content

Kursinnhold

Introduction to React

Introduction to React

1. Getting Started: ES6
2. Getting Started: JSX
3. React in Practice
4. React Components
5. Controlling Data & Content
6. Hooks
7. React Router

book
Creating Navigation Bars

The Link component can be used for creating hyperlinks to URL paths. Whenever dealing with React Routing, we use Link instead of <a href...>.

Following is an example of a navigation bar (drag the slider to view the code or preview):

Everything is enclosed in the BrowserRouter component as it should, and inside it, we have an unordered list that represents the navigation bar.

Each item of the navigation bar is a Link element. Whenever we click an item, it changes the URL.

However, that is not enough, we need the logic to render the relevant component based on the URL.

We use the <Routes> for rendering the relevant component.

If we look at the application, it should be something like this:

carousel-imgcarousel-imgcarousel-img
question mark

Which tag do we use for hyperlinks in React Routing?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 7. Kapittel 3
Vi beklager at noe gikk galt. Hva skjedde?
some-alt