文章/答案/技术大牛

发布

社区首页 >问答首页 >在reach路由器中使用Link时出错。但是，当我使用锚标记时，路由工作正常。

问在reach路由器中使用Link时出错。但是，当我使用锚标记时，路由工作正常。
EN

Stack Overflow用户

提问于 2020-05-10 15:56:00

回答 1查看 163关注 0票数 0

这是我的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;

但是我得到了一个错误: Element type是无效的:需要一个字符串(用于内置组件)或一个类/函数(用于复合组件)，但是got: undefined。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。

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

但是，当我在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可以很好的工作。

reactjs

reach-router

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-10 20:08:25

导入链接时，您丢失了链接周围的{}。

import { Link } from "@reach/router"

这将为您删除该错误。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61714789

复制

相似问题

问在reach路由器中使用Link时出错。但是，当我使用锚标记时，路由工作正常。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在reach路由器中使用Link时出错。但是，当我使用锚标记时，路由工作正常。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在reach路由器中使用Link时出错。但是，当我使用锚标记时，路由工作正常。
EN