Reactjs 为什么使用链路反应路由器导入单独的导航组件不'；不行？

我正在使用react路由器dom进行导航和路由。 我想知道为什么将导航与主应用程序分离时，

链接

不起作用

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;

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>
    )
  }
}

import React，{Component}来自'React'；
从“antd”导入{菜单，布局}；
从“react router dom”导入{BrowserRouter as Link}；
const{Sider}=布局；
类Nav扩展组件{
render（）{
返回(
{console.log（断开）；}
onCollapse={（折叠，类型）=>{console.log（折叠，类型）；}
>
账户
喂
)
}
}
导出默认导航；

App.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;

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>
    )
  }
}

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“antd”导入{布局、菜单、图标}；
从“./Nav”导入Nav；
从“/PageFooter”导入PageFooter；
从“./帐户”导入帐户；
从“./Feed”导入提要；
const{Header，Content，Sider}=布局；
类应用程序扩展组件{
render（）{
返回(
)
}
}

执行此操作时，

Nav.js

中的

链接不起作用。
但是，如果我将
Nav.js
中的代码直接粘贴到
App.js
中，它的效果非常好

我还尝试将我的
Nav.js
更改为只包含函数的组件。我仍然得到了相同的结果。
您的导入不正确
你应该

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

在nav.js中，最好使用Switch=>
从“react router dom”导入{BrowserRouter as Link}
不正确。只需导入
链接