反应 - 错误：不变失败：你不应该在 <Router> 之外使用 <Link>

Question

反应 - 错误：不变失败：你不应该在 <Router> 之外使用 <Link>

Stack Overflow 上有很多此错误的实例，但遗憾的是没有任何帮助调试问题。希望有人可以帮助我理解为什么，请参阅下面的代码。

导航栏.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;

Run Code Online (Sandbox Code Playgroud)

应用程序.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;

Run Code Online (Sandbox Code Playgroud)

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

应用程序本身编译没有错误，但错误：不变失败：您不应在 <路由器> 之外使用 <链接>错误显示在浏览器中。有任何想法吗？

Answer 1

Nat*_*ury 6

所以我可以看到您正在使用<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>
  );
}

Run Code Online (Sandbox Code Playgroud)

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

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，5 月前
查看次数：	6274 次
最近记录：	4 年，2 月前

反应 - 错误：不变失败：你不应该在 &lt;Router&gt; 之外使用 &lt;Link&gt;

反应 - 错误：不变失败：你不应该在 <Router> 之外使用 <Link>