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

Question

[Dmytro Yurikov]

Не работает реакт роутер, в чем проблема?

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;

Answer 1

[Alexandroppolus]

< Route path="/" element={MainPage}> Route>

<Route path="/" element={<MainPage />} />

Comments

[Dmytro Yurikov]

Спасибо, за ваш ответ, я был не внимателен и не заметил свою ошибку.
А если после изменения кода, страница в localhost не загружается( Не знаете в чем проблема может быть?

[szQocks]

Dmytro Yurikov, консоль пишет что-то ? если да - то гугли ошибки, если нет - то задай вопрос более понятно

А если после изменения кода, страница в localhost не загружается( Не знаете в чем проблема может быть?

[Dmytro Yurikov]

szQocks, консоль не жалуется, ошибок нету, суть проблемы, что страница бесконечно загружается и в итоге пишет браузер "не хватает памяти или ошибка в чем-то другом". Пока страница грузится с ней ничего нельзя сделать. Происходит своего рода бесконечная загрузка...

[szQocks]

Dmytro Yurikov, возможно бесконечный редирект, без понятия хм - если код тот который показан выше, попробуй обернуть приложение в StrictMode - возможно покажет ошибку

[szQocks]

Dmytro Yurikov, всё я понял в чем дело, ты в роуте пытаешься загрузить MainPage - а в нём такие же роуты и своего рода бесконечная загрузка получается

роуты у тебя находятся в Header , тебе их нужно в app js наверное перенести...

[szQocks]

Dmytro Yurikov, <Route path="/" element={<MainPage />} /> зачем тебе в хедере загружать MainPage ? в общем - что написал то и получил, думаю теперь разберешься

[Dmytro Yurikov]

szQocks, StrictMode тоже не помог, я мог показать тебе проект весь как-то, возможно что-то заметишь?

[szQocks]

Dmytro Yurikov,

function App() {
  return (    
            <Routes>
                <Route path="/" element={<MainPage />}></Route>
                <Route path="/ourcoffee" element={<CoffeePage />}></Route>
                <Route path="/foryourpleasure" element={<GoodsPage />}></Route>
            </Routes>
  );
}

[Dmytro Yurikov]

szQocks, спасибо большое, теперь понял, что это надо делать только в App

[szQocks]

Dmytro Yurikov, это можно делать где угодно, не обязательно в App, к примеру

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

-------------------------------------------------------

function LayoutPage () {
  return (
<div className='page-wrapper'>
            <Routes>
                <Route path="/" element={<MainPage />}></Route>
                <Route path="/ourcoffee" element={<CoffeePage />}></Route>
                <Route path="/foryourpleasure" element={<GoodsPage />}></Route>
            </Routes>
</div>
)
}

Может быть как угодно, так же могут быть и вложенные роуты в других роутах, в других компонентах и т.д

[Dmytro Yurikov]

szQocks, тогда все равно не понял, почему у меня не робило... Типо у меня тоже в компоненте, который потом передавался в еще один и еще один, но страницу не грузило

[szQocks]

Dmytro Yurikov, ты в App - возвращал MainPage в котором есть Header - который возвращал MainPage - вот и круговорот

[Dmytro Yurikov]

szQocks, аааааа, ну да, все понял, спасибо