Question

我正在使用react-router-dom进行导航和路由。我想知道为什么从主应用程序分离Nav时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>
    )
  }
}

这样做，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

为什么用Link React-Router导入单独的Nav组件不起作用？

1 个答案: