Мы настроили маршрутизацию, но в компоненте Header вы видите список из двух элементов, хотя в хедере обычно располагаются ссылки. Необходимо создать ссылки, пункт «Главная страница» должен в

Вопрос пользователя:

Мы настроили маршрутизацию, но в компоненте Header вы видите список из двух элементов, хотя в хедере обычно располагаются ссылки. Необходимо создать ссылки, пункт «Главная страница» должен вести на /, а пункт «Список друзей» — на /hotel-list import { Routes, Route, } from 'react-router-dom'; import {Home} from '../pages/Home'; import {HotelList} from '../pages/HotelList'; import {SignIn} from '../pages/SignIn'; export const App = () => { return ( <> <Routes> <Route path='/' element={<Home />} /> <Route path='/hotel-list' element={<HotelList />} /> <Route path='/sign-in' element={<SignIn />} /> </Routes> </> ) }; export const Header = () => { return ( <header> <ul className="list"> <li>Главная страница</li> <li>Список отелей</li> </ul> </header> ) };

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

Чтобы превратить элементы списка в ссылки, нужно использовать компонент <Link> из react-router-dom. Вот как это можно сделать:

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

export const Header = () => {
    return (
        <header>
            <ul className="list">
                <li><Link to="/">Главная страница</Link></li>
                <li><Link to="/hotel-list">Список отелей</Link></li>
            </ul>
        </header>
    )
};

Теперь пункт "Главная страница" будет вести на /, а пункт "Список отелей" на /hotel-list.

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

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

export const Header = () => {
    return (
        <header>
            <ul className="list">
                <li><Link to="/">Главная страница</Link></li>
                <li><Link to="/hotel-list">Список отелей</Link></li>
            </ul>
        </header>
    )
};

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: