Почему не работает импорт отдельного компонента Nav с помощью Link React-Router?

Question

Я использую response-router-dom для навигации и маршрутизации. Мне интересно, почему Link не работает при отделении Nav от основного приложения.

Nav.js

import React, { Component } from 'react';
import { Menu, Layout } from 'antd';
import { BrowserRouter as Link } from 'react-router-dom';
const { Sider } = Layout;

class Nav extends Component {
  render() {
    return (
      <Sider
      breakpoint="lg"
      collapsedWidth="0"
      onBreakpoint={(broken) => { console.log(broken); }}
      onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
      >
        <div className="logo" />
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Link to="/account">
                <div>Account</div>
              </Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/feed">
                <div>Feed</div>
              </Link>
            </Menu.Item>
        </Menu>
      </Sider>
    )
  }
}

export default Nav;

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Layout, Menu, Icon } from 'antd';
import Nav from './Nav';
import PageFooter from './PageFooter';
import Account from './Account';
import Feed from './Feed';

const { Header, Content, Sider } = Layout;

class App extends Component {
  render() {
    return (
      <Router>
        <Layout style={{ minHeight: '100vh' }}>
          <Nav/>
          <Layout>
            <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
              <Route exact path="/account" component={Account} />
              <Route exact path="/feed" component={Feed} />
            </Content>
            <PageFooter/>
          </Layout>
        </Layout>
      </Router>
    )
  }
}

При этом Links в Nav.js не работает. Однако, если мне нужно вставить код из Nav.js напрямую в App.js, он прекрасно работает.

Я также пытался изменить Nav.js на компонент только для функций. Тем не менее я получаю тот же результат.

Answer 1

Ваш импорт некорректен ты должен

import { Link } from 'react-router-dom';

в nav.js также лучше использовать Switch => https://reacttraining.com/react-router/web/api/Switch