Почему импорт отдельного компонента навигации с помощью link-response-router не работает?

Я использую 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.info(broken); }}
        onCollapse = {(collapsed, type) => { console.info(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 на функциональный компонент. Тем не менее я получаю тот же результат.

import { BrowserRouter as Link } from 'react-router-dom' не правильный. Просто импортируйте Link
Murli Prajapati 02.09.2018 08:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
476
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

ваш импорт неверен вам следует

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

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

Другие вопросы по теме