在 REACH 路由器中使用链路时出错.但是当我使用锚标记时，路由工作正常

Question

这是我的应用程序.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"));

这是我的导航栏.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;

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

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

但是当我在应用程序中编写整个导航栏组件时.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 "./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"));

它与上述应用程序.js一起工作正常。

Answer 1

导入链接时，链接周围缺少 { }。

import { Link } from "@reach/router"

这应该为您消除该错误。