在 reach-router 中使用 Link 时出错。但是当我使用锚标记时路由工作正常

Question

这是我的App.js

import React from "react";
import ReactDOM from "react-dom";
import { Router, Link } from "@reach/router";
import Add from "./components/Add";
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import "./css/styles.css";

const App = () => {
  return (
    <div>
      <Navbar />
      <Router>
        <Home path="/" />
        <Add path="/add" />
      </Router>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

这是我的 Navbar.js

import React from "react";
import Link from "@reach/router";
import "../css/navbar.css";

const Navbar = () => {
  return (
    <nav className="navbar">
      <div className="navitem">
        <a href="/">
          <h1>Beautiful Places</h1>
        </a>
      </div>
      <div className="navitem">
        {" "}
        <Link to="/add">
          <button className="btn">Add a Place</button>
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;

但是我收到一个错误：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。

但是当我使用锚标记而不是 Link 时，我没有收到任何错误并且应用程序运行正常。在这方面需要帮助

但是当我在 App.js 中对整个 Navbar 组件进行如下编码时。

import React from "react";
import ReactDOM from "react-dom";
import { Router, Link } from "@reach/router";
import Add from "./components/Add";
import Home from "./components/Home";
import "./css/navbar.css";
import "./css/styles.css";

const App = () => {
  return (
    <div>
      <nav className="navbar">
        <div className="navitem">
          <Link to="/">
            <h1>Beautiful Places</h1>
          </Link>
        </div>
        <div className="navitem">
          {" "}
          <Link to="/add">
            <button className="btn">Add a Place</button>
          </Link>
        </div>
      </nav>
      <Router>
        <Home path="/" />
        <Add path="/add" />
      </Router>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

以上 App.js.

工作正常

Answer 1

您在导入时缺少 Link 周围的 { }。

import { Link } from "@reach/router"

这应该会为您消除该错误。

在 reach-router 中使用 Link 时出错。但是当我使用锚标记时路由工作正常

Error while using Link in reach-router. But routing is working fine when I use anchor tag

reactjs

reach-router