时间戳

首页 > 解决方案 > 我如何确保当我单击一个图标时，会出现另一个带有 React.js 的页面

javascript - 我如何确保当我单击一个图标时，会出现另一个带有 React.js 的页面

问题描述

我需要一些帮助。我有一个图标，我希望当我按下该图标时可以转到其他页面，但我收到此错误 Error: Invariant failed: You should not use <Link> outside a <Router> Error

这是我的代码：

    import React from 'react';
    import { IconContext } from "react-icons";
    import { BsFileEarmarkArrowDown } from "react-icons/bs";
    // import { Link } from "react-router-dom";
    import "./icon.css"
    
    const Question = () => {
        return (
            <IconContext.Provider value={{ color: "Green", className: "Icon", size:"3em" }}>
               <BsFileEarmarkArrowDown />
               </IconContext.Provider>
        );
      };
      
    //   export default function Firms() {
    //     return (
    //       <Link to="/Upload.js">
    //          <Question />
    //       </Link>
    //     );
    //   }
    
      export default Question

标签： javascriptreactjs

解决方案

您只能在树组件<Link>内部使用。<Router>

<Router>
  <Switch> 
    <Route exact path="/upload">
      <Upload /> // Conditionally rendered views that may contain links pointing to different routes
    </Route>
  </Switch>
</Router>

您的<Question/>组件需要留在<Router>组件内部（与路由上下文相关的所有内容）。

要为您的问题分配 a Link，您可以这样做：

<Question component={Link} to="/upload"/>

最后，把它放在你<Router>树的某个地方。只要它包含在路由上下文中，在哪个级别都没有关系：

<Router>
  <Switch> 
  ....
  </Switch>
  <Question component={Link} to="/upload"/>
</Router>

我强烈建议您查看官方文档以获取更多见解。

推荐阅读