Я использую 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 { Link } from 'react-router-dom';
в nav.js также лучше использовать Switch => https://reacttraining.com/react-router/web/api/Switch
import { BrowserRouter as Link } from 'react-router-dom'не правильный. Просто импортируйтеLink