React - 错误：不变量失败：您不应该在 <Router> 之外使用 <Link>答案

【问题标题】：React - Error: Invariant failed: You should not use <Link> outside a <Router>React - 错误：不变量失败：您不应该在 <Router> 之外使用 <Link>
【发布时间】：2020-05-22 17:51:29
【问题描述】：

在 Stack Overflow 上有很多这样的错误实例，但遗憾的是没有任何帮助调试问题的方法。希望有人可以帮助我理解原因，请参见下面的代码。

Navbar.js：

import React from 'react';
import { Link } from 'react-router-dom'
 const Navbar = ()=>{
    return(
            <nav className="nav-wrapper">
                <div className="container">
                    <Link to="/" className="brand-logo">Shopping</Link>

                    <ul className="right">
                        <li><Link to="/">Shop</Link></li>
                        <li><Link to="/cart">My cart</Link></li>
                        <li><Link to="/cart"><i className="material-icons">shopping_cart</i></Link></li>
                    </ul>
                </div>
            </nav>  
    )
}

export default Navbar;

App.js：

import React from 'react';
import logo from './assets/logo.png';
import './styles/App.css';
import CartHeader from './components/CartHeader.js';
import Navbar from './components/Navbar.js';

function App() {
  return (
    <div className="App">
      <Navbar />
      <header className="App-header">
        <div className="App-header-left">
          <img src={logo} className="App-logo" alt="logo" />
        </div>
        <div className="App-header-right">
          <CartHeader />
        </div>
      </header>

      <body className="App-body">
        <div className="App-body-image-container">
          <h1 className="Green-header">Greenleaf</h1><h2 className="White-header">The apple of your eye.</h2>
        </div>
      </body>

    </div>
  );
}

export default App;

package.json： 在许多其他内容中，"react-router-dom": "^5.2.0" 列在依赖项下。

应用程序本身编译没有错误，但 Error: Invariant failed: You should not use outside a 错误显示在浏览器中。有什么想法吗？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

所以我可以看到您正在使用 <Link> 并从正确的位置导入它，但是，您没有将 <App> 包装在 <Router> 中。

查看react-router-dom 文档以获得额外支持。

以下是react-router-dom 工作原理的示例：

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

如果您注意到，链接位于路由器内部。

所以在你的情况下，你可能想要这样做：

import React from 'react';
import logo from './assets/logo.png';
import './styles/App.css';
import CartHeader from './components/CartHeader.js';
import Navbar from './components/Navbar.js';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from 'react-router-dom';
function App() {
  return (
    <Router>
    <div className="App">
      <Navbar />
      <header className="App-header">
        <div className="App-header-left">
          <img src={logo} className="App-logo" alt="logo" />
        </div>
        <div className="App-header-right">
          <CartHeader />
        </div>
      </header>

      <body className="App-body">
        <div className="App-body-image-container">
          <h1 className="Green-header">Greenleaf</h1><h2 className="White-header">The apple of your eye.</h2>
        </div>
      </body>

    </div>
    <Router>
  );
}

【讨论】：

完美！我试图将标签包装在中的 index.js 中，但它引发了一个未定义的错误，将其添加到 App.js 中的 app 标签内似乎已经解决了问题！谢谢你:)
非常感谢；使用 Link 标签后，我忘记在 App.js 标签中使用。

【解决方案2】：

你有没有用 Router 标签包裹你的 App 组件？例如：

// index.js

<Router>
  <App />
</Router>

还有来自其文档https://reacttraining.com/react-router/web/example/basic的资源

【讨论】：

如果我将<App /> 标签包装在<Router /> 标签中，我会得到以下Failed to compile. ./src/index.js Line 9:6: 'Router' is not defined react/jsx-no-undef Search for the keywords to learn more about each error.。我需要在 index.js 中引用 react-router-dom 吗？
是的，你应该在你的index.jsimport { Router } from 'react-router-dom'

【解决方案3】：

最简单的答案就在 reactstrap 的官方文档中，用于 Navbar https://reactstrap.github.io/components/navbar/

他们指导我们需要使用这个导入

import {NavLink} from 'reactstrap';

【讨论】：

【解决方案4】：

你有错误的导入。

改变这个：

import { Link } from 'react-router-dom'

到这里：

import Link from "next/link";

【讨论】：