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

Question

DeVit0 @DeVit0

React

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

Учу реакт и столкнулся с проблемой роутинга на сайте. Он почему-то просто отказывается работать. Есть файл 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;

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

Вопрос задан более трёх лет назад
311 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

а какая версия роутера? И почему вы не импортируете сущности?
GlazOtca, версия роутера 6.2.2 Все импортировано, просто решил это здесь не показывать, и продемонстрировать, что блок About, самое главное, я импортировал)
DeVit0, До 6 версии работало так, как вы изначально написали. А начиная с 6 версии, так делается вложенный роутинг и element там обязателен(он может быть функцией или компонентом).

Answer 1 · 2022-03-13 11:51:20

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

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;

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

Войдите на сайт