Не видит импорт Routes в react-router-dom

Рейтинг: 0Ответов: 1Опубликовано: 11.04.2023
// app.jsx

import Profile from "./components/Profile/Profile";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <div className="app-wrapper">
      <Header />
      <Aside_Navbar />
      <main className="main">
        <Router>
          <Routes>
            <Route path="/profile" element={Profile}/>
          </Routes>
        </Router>
      </main>
    </div>
  )
}

export default App;
// package.json

"react-dom": "^18.2.0",
"react-router-dom": "^6.10.0",
"react-scripts": "^5.0.1",

Не видит Routes при импорте маршрута, версия стоит последняя

Пробовал перезапустить npm install

Ответы

▲ 0

В Router оборачиваем страницу, в Routes то что меняется. И в элемент немного по другому. Основную страницу тоже нужно сделать и импортировать, которая path="/" будет

    import Main from "./components/Main/Main";
    import Profile from "./components/Profile/Profile";
    import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
    
    const App = () => {
      return (
        <div className="app-wrapper">
            <Router>
              <Header />
              <Routes>
                <Route path="/" element={<Main />}/>
                <Route path="/profile" element={<Profile />}/>
              </Routes>
            </Router>
          </main>
        </div>
      )
    }
    
    export default App;