Как изменить код чтоб работал под реакт роутер 6-ой версии?

Question

[webjun]

Приветсвтую, в процессе изучения реакта дошел до темы роутинга и в ней загруз..

Учусь по видео автора и у него есть такой код:

import React from "react";
import Articles from "./components/Articles/Articles.jsx";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import About from "./About";
import Header from "./components/Header/Header.jsx";

function App() {
  return (
    <div className="App">
      <Header />
      <Router>
        <Switch>
          <Route path="/">
            <Articles />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

Я понимаю что этот код не работает из-за обновления 6-ой версии и я его поменял :

import React from "react";
import Articles from "./components/Articles/Articles.jsx";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import About from "./About";
import Header from "./components/Header/Header.jsx";

function App() {
  return (
    <div className="App">
      <Header />
      <Router>
        <Routes>
          <Route path="/">
            <Articles />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Почему ничего не отображается на странице после правки и как надо писать ?

P.s Буду так же благодарен если кинете полезные линки по роутингу ибо сколько не смотрю/читаю - не дается эта тема..

Comments

[Александр]

https://reactrouter.com/docs/en/v6/upgrading/v5

Answer 1

[reduce]

https://www.youtube.com/watch?v=0auS9DNTmzE&list=P... Вот хорошо обесняет.

import { BrowserRouter, Routes, Route } from "react-router-dom";

<BrowserRouter>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<Articles />} />
          <Route path="/about" element={ <About />} />
        </Routes>
      </div>
</BrowserRouter>

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