为什么使用链接 react-router 导入单独的导航组件不起作用？

Question

我正在使用 react-router-dom 进行导航和路由。 我想知道为什么 Link 在将导航与主应用分开时不起作用。

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

这样做，Nav.js 中的 Links 不起作用。 但是，如果我应该将 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