Ошибка You should not use NavLink outside a Router?

Question

[JastaFly]

Доброго всем времени суток! Изучаю react, добрался до темы роутинга и при попытке создать NavLink в меню получаю следующую ошибку:

./node_modules/react-router-dom/modules/NavLink.js
SyntaxError: C:\Projects\react\my-app\node_modules\react-router-dom\modules\NavLink.js: Support for the experimental syntax 'jsx' isn't currently enabled (45:7):

  43 |   ) => {
  44 |     return (
> 45 |       <RouterContext.Consumer>
     |       ^
  46 |         {context => {
  47 |           invariant(context, "You should not use <NavLink> outside a <Router>");
  48 | 
Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

Пробовал устанавливать @babel/plugin-transform-react-jsx. Не помогло.
Вот код меню:

import React from "react";
import style from "./Menu.module.css"
import NavLink from "react-router-dom/modules/NavLink";

function Menu() {
    return (
            <div className="island main-menu">
                <NavLink to="/profile" className={`${style.menu} ${style.menu_selected}`}>
                    <div className="menu__icon">
                      
                    </div>
                    <span className={style.menu__text}>Profile</span>
                </NavLink>
                <NavLink to="/dialogs" className={style.menu}>
                    <div className="menu__icon">
                   
                    </div>
                    <span className={style.menu__text}>Message</span>
                </NavLink>
                <a className={style.menu}>
                    <div className="menu__icon">
                       
                    </div>
                    <span className={style.menu__text}>News</span>
                </a>
                <a className={style.menu}>
                    <div className="menu__icon">
                       
                    </div>
                    <span className={style.menu__text}>Settings</span>
                </a>
            </div>
    );
}

export default Menu;

Вот App.js:

import React from 'react';
import './App.css';
import Sidebar from "./components/sidebar/Sidebar";
import Profile_page from "./components/profile_page/Main";
import Dialogs from "./components/dialogs/Dialogs"
import { BrowserRouter, Route, Link } from "react-router-dom";


function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Sidebar></Sidebar>
                <Route path="/dialogs" component={Dialogs}></Route>
                <Route path="/profile" component={Profile_page}></Route>
            </div>
        </BrowserRouter>
    );
}

export default App;

Собственно меню является частью компонента Sidebar:

import React from "react";
import Logo from "../logo/Logo";
import Menu from "../menu/Menu";

function Sidebar() {
    return (
        <aside>
            <Logo></Logo>
            <Menu></Menu>
        </aside>
    );
}

export default Sidebar;

Помогите разобраться что не так.
Заранее всем спасибо)

Answer 1

[JastaFly]

В итоге решил проблему заменив импорт:

import NavLink from "react-router-dom/modules/NavLink";

На:
import {NavLink} from "react-router-dom";
Спасибо всем за помощь.
Буду благодарен если кто то подробно пояснит в чём разница между двумя импортами?!??

Comments

[Сергей]

Первый импорт когда в модуле функция или класс export default. Во втором случае ссылаемся на модуль и выбираем внутри фигурных скобок из нескольких export(не default)

Answer 2

[Сергей]

Компонент switch нужен который оборачивает роуты.

Comments

[JastaFly]

Попробовал так:

import React from 'react';
import './App.css';
import Sidebar from "./components/sidebar/Sidebar";
import Profile_page from "./components/profile_page/Main";
import Dialogs from "./components/dialogs/Dialogs"
import {BrowserRouter, Route} from "react-router-dom";
import Switch from "react-router-dom/es/Switch";


function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Sidebar></Sidebar>
                <Switch>
                    <Route path="/dialogs" component={Dialogs}></Route>
                    <Route path="/profile" component={Profile_page}></Route>
                </Switch>
            </div>
        </BrowserRouter>
    );
}

export default App;

Не помогает. Получаю туже ошибку:

./node_modules/react-router-dom/modules/NavLink.js
SyntaxError: C:\Projects\react\my-app\node_modules\react-router-dom\modules\NavLink.js: Support for the experimental syntax 'jsx' isn't currently enabled (45:7):

  43 |   ) => {
  44 |     return (
> 45 |       <RouterContext.Consumer>
     |       ^
  46 |         {context => {
  47 |           invariant(context, "You should not use <NavLink> outside a <Router>");
  48 | 

Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.