React Router Dom не отображает компонент

Question

React Router Dom не отображает компонент

Рейтинг: 0Ответов: 1Опубликовано: 13.02.2023

React Router Dom не отображает компонент. В App указал все пути и компоненты. При переходе по ним в адресной строке путь отображается корректно но компонент не открывается.

import { Route, Routes } from 'react-router';
import Header from './components/header/header';
import Class from './components/class/class';
import './App.css';
import Freelance from './components/freelance_camp/freelance';
import Footer from "./components/footer/footer"
import Coworking from "./components/coworking_center/coworking"
import Soft from "./components/soft/soft"
import Main from './components/main/main';

function App() {
return (
<div className="App">
  <Header/>
    <Routes>

       <Route  path='/' element={<Main/>}/>
       <Route  path='/freelance_camp' element={<Freelance/>}/>
       <Route  path="/coworking_center" element={<Coworking/>} />
       <Route  path="/soft" element={<Soft/>} />
      
    </Routes>
  <Class/>
  <Footer/>
</div>
);
}

export default App;

Блок с кнопкой перехода.

import classDB from "./classDB"
import "./class.css"
import { Link } from "react-router-dom"


function Class(){
  return(
    <div className="class_container">

        {classDB.map((el, index) => (
            
            <div key={el.id} className="card">
                
                <img  key={index} className="card_img"  src={"./img/" + el.img} alt="item"> 
  </img>

                <p className="card_tittle">{el.tittle}</p>

                <p className="card_price">{el.price}</p>    

                <p className="card_location">{el.location}</p>

                <Link className="card_link" to={el.link}>Перейти</Link>
            </div>
              
        ))}
        
   </div>
  )
}

export default Class;

Вот содержание classDB

const officeDB = [
  {
    id: 1,
    img: "1.jpg",
    tittle: "Freelance Camp",
    price: "KGS 700/pp/day",
    location: "Bishkek, Kyrgyzstan",
    link: "/freelance_camp"
  },
  {
    id: 2,
    img: "2.jpg",
    tittle: "Coworking Center",
    price: "KGS 1000/pp/day",
    location: "Bishkek, Kyrgyzstan",
    link: "/coworking_center"
  },
  {
    id: 3,
    img: "3.jpg",
    tittle: "Soft",
    price: "KGS 1200/pp/day",
    location: "Bishkek, Kyrgyzstan",
    link: "/soft"
  }
]

export default officeDB;

javascript reactjs react-router

Источник: Stack Overflow на русском

Answer 1

▲ 0

React Router Dom не отображает компонент. В App указал все пути и компоненты.

Вот один из вариантов применения react-router-dom 6-той версии.

Как можешь заметить, помимо использования Routes и Route. все это "оборачивается" в BrowserRouter...

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { PageOne, PageTwo } from './Components/Page';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='one' element={<PageOne />} />
        <Route path="two" element={<PageTwo />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Более подробно можно почитать тут. https://ru.hexlet.io/blog/posts/react-router-v6

React Router Dom не отображает компонент

Ответы