0

编辑：没关系，我发现了问题。我在导航栏组件中使用了 Nav.link 而不是 Nav.Link ：/。现在工作正常。

我正在尝试学习反应和引导程序，并且正在构建一个带有导航栏、几个页面和一个登录页面的简单应用程序。我创建了一个名为 Navigation.js 的单独文件来定义导航栏组件并将其导出，以便我可以在 App.js 中使用它。但是，我收到以下错误：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查Navigation.

Navigation.js 文件路径为 src/components/Navigation.js，对于 App.js，它是 src/App.js。

以下是相关的代码片段：

应用程序.js

import 'bootstrap/dist/css/bootstrap.min.css';  
import './App.css';

import Navigation  from './components/Navigation';
import MainLandingPage from './components/pages/AppLandingPage';
import ContactUs from './components/pages/ContactUs';
import AboutUs from './components/pages/AboutUs';
import Login from './components/pages/Login';
import Home from './components/pages/Home';

import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Navigation/>
      <Switch>                
          <Route path='/about' component={AboutUs}/>                 
          <Route path='/contact' component={ContactUs}/>
          <Route path='/login' component={Login}/> 
          <Route path='/home' component={Home}/>  
          <Route path='/' component={MainLandingPage}/>            
      </Switch>
    </div>
  );
}

export default App;

导航.js：

import React from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';

class Navigation extends React.Component {
    constructor(props)
    {
        super(props);
    }
    render() {
        return (
            <Navbar collapseOnSelect fixed='top' expand='sm' bg='dark' variant='dark'>
                <Container>
                    <Navbar.Toggle aria-controls='responsive-navbar-nav'/>
                    <Navbar.Collapse id='responsive-navbar-nav'>
                        <Nav>
                            <Nav.link href='/'>Main</Nav.link>
                            <Nav.link href='/about'>About Us</Nav.link>
                            <Nav.link href='/contact'>Contact Us</Nav.link>
                            <Nav.link href='/login'>Log in</Nav.link>
                            <Nav.link href='/home'>Homepage</Nav.link>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
    );
    }
}

export default Navigation;

我确实查找了默认导出和命名导出之间的差异，我认为在这种情况下我得到了正确的部分。我还尝试将导航组件定义为如下函数：

function Navigation() {
    return (
        <Navbar collapseOnSelect fixed='top' expand='sm' bg='dark' variant='dark'>
            <Container>
                <Navbar.Toggle aria-controls='responsive-navbar-nav'/>
                <Navbar.Collapse id='responsive-navbar-nav'>
                    <Nav>
                        <Nav.link href='/'>Main</Nav.link>
                        <Nav.link href='/about'>About Us</Nav.link>
                        <Nav.link href='/contact'>Contact Us</Nav.link>
                        <Nav.link href='/login'>Log in</Nav.link>
                        <Nav.link href='/home'>Homepage</Nav.link>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
}

但我得到相同的结果。我不确定我在这里缺少什么。

4

1 回答 1

1

在链接中做这个大写 L

<Nav.Link href='/'>Main</Nav.Link>
于 2021-08-19T06:38:11.747 回答