Не работает react-router-dom?

Question

[holfizz]

начал учить реакт и столкнулся с маленькой проблемой не работает react-router-dom

import React from 'react'
import './css/style.css'
import { BrowserRouter, Route } from "react-router-dom";
import About from "./pages/About";

function App() {
    return(
       <BrowserRouter>
            <Route path='/about'>
               <About/>
            </Route>
       </BrowserRouter>
    )
}

export default App

import React from 'react';

const About = () => {
    return (
        <h1>
            123
        </h1>
    );
};

export default About;

если в локал хост написать /about то должно вывестись 123 но почему-то не работает
делал все по видео у автора работает у меня нет помогите пожалуйста

Answer 1

[Alexandroppolus]

делал все по видео

Вот в этом и проблема.

Делай по документации
https://reactrouter.com/docs/en/v6

У тебя ведь 6 версия?

Comments

[holfizz]

ну все также как в документации и нечего не работает) а на счет версии не знаю

[Александр]

holfizz, вот пример из документации

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Dashboard />}>
      <Route
        path="messages"
        element={<DashboardMessages />}
      />
      <Route path="tasks" element={<DashboardTasks />} />
    </Route>
    <Route path="about" element={<AboutPage />} />
  </Routes>
</BrowserRouter>

Answer 2

[Квазиморд Сидорович]

Скорее всего у автора видео react-router-dom - 5-й версии, а у вас 6-я Там синтаксис поменялся. Вам нужно или изменить свой код под новый синтаксис или удалить 6-ю версию и поставить 5-ю
Посмотреть какая версия можно в файле package.json.
Удалить текущую версию библиотеки npm uninstall react-router-dom, поставить 5-ю версию npm install react-router-dom@5