react-router-dom не импортирует Routes

Question

Столкнулся с проблемой. Установил react-router-dom v6.3.0. Прописал в файле app.js все нужные импорты (в т.ч. import {BrowserRouter, Route, Routes} from "react-router-dom". Но почему то Routes подсвечен волнистой линией. Такое впечатление, что react-router-dom вообще не знает про него. И естественно всё, что в этом теге "Routes" просто не отображается на странице. Может кто-то сталкивался... В данном примере не видно волнистого подчеркивания под 'Routes', но в web storm оно есть.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Header from "./components/Header/Header";
import NavBar from "./components/NavBar/NavBar";
import Profile from "./components/Profile/Profile";
import MyPosts from "./components/Profile/MyPosts/MyPosts";
import Dialogs from "./components/Dialogs/Dialogs";
import {BrowserRouter} from "react-router-dom";
import {Route, Routes} from "react-router-dom"


function App() {
    return (
        <BrowserRouter>
            <div className="App-wrapper">
                <Header/>
                <NavBar/>
                <div className="App-wrapper-content">
                    <Routes>
                        <Route path="/" element={<Dialogs/>}/>
                        <Route path="/" element={<Profile/>}/>
                    </Routes>
                </div>
            </div>
        </BrowserRouter>
    );
}

export default App;

Answer 1

В консоли проекта:

npm install react-router-dom@6

npm install --save react-router-dom

Перезапускаем сервер npm start

Далее App.js

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

function App() {

    return (
                <Router>
                    <Routes>
                    <Route path="/about" element={<About/>}/>
                    </Routes>
                </Router>
    );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
        <App />
);

About.jsx

import React from 'react';

const About = () => {
    return (
        <div>
            This app was created
        </div>
    );
};

export default About;

На практике Routes все еще будет подчеркнуто, но рендер таким образом произошел. Именно после команды npm --save

БЛОГ НА HUSL

react-router-dom не импортирует Routes

Ответы (1 шт):