vokir
@vokir
Trainee Front-End Developer

Почему не работает react-router 6?

Не работает реакт роутер, не могу понять в чем проблема. Подскажете?

coffee-header.js ->
import { Routes, Route, Link } from 'react-router-dom'; 

import MainPage from '../main-page/main-page';
import GoodsPage from '../../../goods-page/components/goods-page/goods-page';
import CoffeePage from '../../../coffee-page/components/coffee-page/coffee-page';

import './coffee-header.scss';

function Header() {
    return (
        <>
            <header className="header">
                <div className="container">
                    <div className="header__wrapper">
                        <div className="header__icon">
                            <img className="header__icon" src="icons/logo.svg" alt="logo" />
                        </div>
                        <ul className="header__list">
                            <li className="header__list__item"><Link to="/">Coffee house</Link></li>
                            <li className="header__list__item"><Link to="/ourcoffee">Our coffee</Link></li>
                            <li className="header__list__item"><Link to="/foryourpleasure">For your pleasure</Link></li>
                        </ul>
                    </div>
                </div>
            </header>
            <Routes>
                <Route path="/" element={MainPage}></Route>
                <Route path="/ourcoffee" element={CoffeePage}></Route>
                <Route path="/foryourpleasure" element={GoodsPage}></Route>
            </Routes>
        </>
    );
  }
  
  export default Header;


coffee-page.js ->
import './coffee-page.scss';



function CoffeePage() {
  return (    
      <div>
        CoffeePageCoffeePageCoffeePageCoffeePageCoffeePageCoffeePage
      </div>
  );
}

export default CoffeePage;


goods-page.js ->
import './goods-page.scss';



function GoodsPage() {
  return (    
      <div>
        <h1> GoodsPageGoodsPageGoodsPageGoodsPageGoodsPageGoodsPageGoodsPageGoodsPage</h1>
      </div>
  );
}

export default GoodsPage;


index.js->
import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom'

import './index.scss';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<BrowserRouter>
		<App />
	</BrowserRouter>
);


App.js ->
import MainPage from './pages/main-page/components/main-page/main-page';

import './App.scss';


function App() {
  return (    
      <MainPage /> 
  );
}

export default App;


main-page->
import Header from '../coffee-header/coffee-header';
import Promo from '../coffee-promo/coffee-promo';
import About from '../coffee-about/coffee-about';
import Best from '../coffee-best/coffee-best';
import Footer from '../coffee-footer/coffee-footer';

import './main-page.scss';

function MainPage() {
  return (    
    <>
        <Header />
        <Promo />
        <About />
        <Best />
        <Footer/>
    </>
  );
}

export default MainPage;
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
< Route path="/" element={MainPage}> Route>

<Route path="/" element={<MainPage />} />
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы