react-router-dom 出现错误，我无法解决答案

【问题标题】：Getting an error with react-router-dom, that I can't solvereact-router-dom 出现错误，我无法解决
【发布时间】：2020-09-20 10:04:33
【问题描述】：

我有以下代码

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

我正在学习一个教程，但是它们的标题组件与上面一样工作；但是，我在控制台中收到错误，页面上没有任何渲染。

VM84 bundle.js:40892 Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>

我认为我必须对 withRouter 做点什么，但不知道该怎么做。

我有一个指向代码所在的 github 存储库的链接，因为我正在使用 webpack 和 babel 来捆绑我的项目。 https://github.com/altafmquadri/expensify-app。

【问题讨论】：

标签： reactjs hyperlink routes react-router webpack-dev-server

【解决方案1】：

错误告诉您Links 不能在Router 之外呈现。所有链接都在标题组件中呈现。将Header 移动到Router。

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

【讨论】：

【解决方案2】：

Header 组件需要在 Router 内才能访问 Header 组件内的链接。

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

【讨论】：