Reactjs 在react路由器dom中得到一个错误，我可以'；解决不了

我有以下代码

import React from 'react';
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
import 'normalize.css/normalize.css'
import './styles/styles.scss'

const ExpenseDashboardPage = () => (
    <div>
        This is from my dashboard component
    </div>
)

const AddExpensePage = () => (
    <div>
        This is from my add expense component
    </div>
)

const EditExpensePage = () => (
    <div>
        This is for editing expenses component
    </div>
)

const HelpPage = () => (
    <div>
        This is help component
    </div>
)

const NotFoundPage = () => (
    <div>
        404! <Link to='/'>Go Home</Link>
    </div>
)

const Header = () => (
    <header>
        <h1>Expensify</h1>
        <Link to="/">Home</Link>
        <Link to='/create'>Add Expense</Link>
        <Link to='/edit'>Edit Expense</Link>
        <Link to='/help'>Help</Link>
    </header>
)

const routes = (
    <div>
        <Header />
        <Router>
            <Switch>
                <Route exact path='/' component={ExpenseDashboardPage} />
                <Route path='/create' component={AddExpensePage} />
                <Route path='/edit' component={EditExpensePage} />
                <Route path='/help' component={HelpPage} />
                <Route component={NotFoundPage} />
            </Switch>
        </Router>
    </div>
)


ReactDOM.render(routes, document.getElementById('app'))

从“React”导入React；
从“react dom”导入react dom
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Link}
导入“normalize.css/normalize.css”
导入“./styles/styles.scss”
const ExpenseDashboard页面=（）=>(
这是来自我的仪表板组件
)
const AddExpensePage=（）=>(
这来自我的“添加费用”组件
)
const EditExpensePage=（）=>(
这是用于编辑费用组件的
)
常量帮助页=（）=>(
这是帮助组件
)
const NotFoundPage=（）=>(
404！回家
)
常量头=（）=>(
花费
家
增加费用
编辑费用
帮助
)
常数路由=(
)
ReactDOM.render（routes，document.getElementById（'app'））

我遵循一个教程，但他们的标题组件的工作原理如上所述；但是，我在控制台中遇到一个错误，页面上没有任何呈现

VM84 bundle.js:40892未捕获错误：不变量失败：不应在外部使用

我相信我必须用路由器做些事情，但我不知道如何继续

---

我有一个到github repo的链接，代码也在其中，因为我正在使用webpack和babel捆绑我的项目

报头组件需要位于

路由器内部

，以便能够访问报头组件内部的链路

---

报头组件需要位于

路由器内部，以便能够访问报头组件内部的链路

错误告诉您，
链接不能在
路由器之外呈现。所有链接都在标题组件中呈现。将
标题
移动到
路由器
中

const routes = (
  <div>
    <Router>
      <Header />
      <Switch>
        <Route exact path='/' component={ExpenseDashboardPage} />
        <Route path='/create' component={AddExpensePage} />
        <Route path='/edit' component={EditExpensePage} />
        <Route path='/help' component={HelpPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </Router>
  </div>
);

const路由=(
);
错误告诉您，
链接不能在
路由器之外呈现。所有链接都在标题组件中呈现。将
标题
移动到
路由器
中

const routes = (
  <div>
    <Router>
      <Header />
      <Switch>
        <Route exact path='/' component={ExpenseDashboardPage} />
        <Route path='/create' component={AddExpensePage} />
        <Route path='/edit' component={EditExpensePage} />
        <Route path='/help' component={HelpPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </Router>
  </div>
);

const路由=(
);