Почему не работает роутинг?

Question

[DeVit0]

Учу реакт и столкнулся с проблемой роутинга на сайте. Он почему-то просто отказывается работать. Есть файл About.jsx:

import React from 'react';

const About = () => {
    return (
        <h1>
            Это приложение создано в качестве обучения
        </h1>
    );
};

export default About;

И есть файл App.js, в котором непосредственно выполняется роутинг:

import About from "./pages/About";
function App() {
    return (
        <BrowserRouter>
            <Route path="/about">
                <About/>
            </Route>
        </BrowserRouter>
    )
}

export default App;

На выходе я не получаю ничего, пустой лист. В чем может быть проблема?

Comments

[GlazOtca]

а какая версия роутера? И почему вы не импортируете сущности?

[DeVit0]

GlazOtca, версия роутера 6.2.2 Все импортировано, просто решил это здесь не показывать, и продемонстрировать, что блок About, самое главное, я импортировал)

[GlazOtca]

DeVit0, До 6 версии работало так, как вы изначально написали. А начиная с 6 версии, так делается вложенный роутинг и element там обязателен(он может быть функцией или компонентом).

Answer 1

[Alexandroppolus]

<Route path="/about" element={< About />} />

Comments

[DeVit0]

Попробовал ваш вариант, все равно не работает. У меня версия роутера 6.2.2, если что. Просто такое ощущение, что блок About, как будто не доходит до App.js) А чем мой вариант отличается от вашего?

Answer 2

[profesor08]

<BrowserRouter basename="/">

Comments

[DeVit0]

Попробовал и ваш вариант, но наверное не до конца понял, как правильно это сделать)
, когда я добавляю в basename, мне в этой строчке слэш убирать надо?
<Route path="/about" element={<About />} />

[profesor08]

DeVit0, параметр basename должен соответствовать базовому url на сайте. Если твое реакт приложение открываться по ссылке mysite.com, то basename="/". Если открывается по url mysite.com/app/cabinet то basename="/app/cabinet". Иначе ничего не будет отображаться.

[DeVit0]

profesor08, а, вон, что! Спасибо большое

Answer 3

[DeVit0]

Друзья, всем спасибо! Решил проблему так:

import React from "react";
import './styles/App.css'
import {BrowserRouter, Route, Router, Routes} from "react-router-dom";
import About from "./pages/About";
import Posts from "./pages/Posts";


function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/about" element={<About />} />
                <Route path="/posts" element={<Posts />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;