在app.js文件中为React应用程序添加页脚和导航，包括React路由

Question

我正在尝试将页脚添加到我的App.js中。我已经将导航添加到了App.js文件中。我想把页脚添加到每一页，而不是添加到我制作的每一页的底部。

App.js文件

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./App.css";
import DocumentTitle from "react-document-title";
import Home from "./pages/Home";
import NoMatch from "./components/NoMatch";
import Landing from "./components/Landing";
import Navigation from "./components/Navigation";
import Footer from "./components/Footer";
function App() {
return (
<DocumentTitle title="Page Title">
<Router>
<div>
<Navigation />
<Switch>
<Route exact path="/home" component={Home} />
<Route exact path="/" component={Landing} />
<Route component={NoMatch} />
</Switch>
{/*  This Footer placement doesn't work  */}
<Footer /> 
</div>
</Router>
</DocumentTitle>
);
}`

每次我把<Footer />放在某个地方。。DOM崩溃。下面是我收到的一个例子。。。

错误

×错误：元素类型无效：应为字符串(用于内置组件(或类/函数(用于复合组件(，但得到的却是：object。您可能忘记了从中定义的文件导出组件，或者您可能混淆了默认导入和命名导入。检查App的渲染方法。

为了方便起见，附加了一个Footer.js和Navigation.js文件。。

Footer.js

import React from "react";
function Footer() {
return (
<div>
<footer>Footer</footer>
</div>
);
}
export default Footer;

Navigation.js

import React from "react";
function Navigation() {
return (
<div>
<h1>Navbar</h1>
</div>
);
}
export default Navigation;

Answer 1

这个乏味问题的答案在于组件的导出。组件未正确导出。我通过使用导出页脚组件文件夹的方式纠正了这一点。

组件index.js是空的，所以我只添加了export { default } from "./Footer";

谢谢大家的回答。