我怎样才能确保当我点击一个图标时，另一个页面会出现 React.js

Question

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

这是我的代码：

    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

Answer 1

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

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

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

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

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

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

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

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

Answer 2

1 - <Link to="/Upload.js"> - 这是错误的， <Link>不用于链接到文件，它应该是<Link to="/upload"> 。

2 - 设置一些路线

<Router>
  <Switch> 
    <Route exact path="/upload">
      <Upload />     /* This component from ur upload.js file */
    </Route>
    <Route path="/firms">
      <Firms />
    </Route>
  </Switch>
</Router>

文档： https : //reactrouter.com/web/example/basic

Answer 3

如果要将页面重定向到上传，则链接不能在没有路由器的情况下使用

如果您希望加载另一个 React 组件，就像您在链接路径中编写的 Upload.js 一样

做这个

import Uploads from 'upload.js file path';
import React from 'react';
import { IconContext } from "react-icons";
import { BsFileEarmarkArrowDown } from "react-icons/bs";
import "./icon.css"

const Question = () => {
    return (
        <IconContext.Provider value={{ color: "Green", className: "Icon", size:"3em" }}>
           <BsFileEarmarkArrowDown />
           </IconContext.Provider>
    );
  };
  
   export default function Firms() {
     return (
         <Uploads/>
         <Question />  
    );
   }

  export default Question

如果你想让你的 url 去上传，你可以使用使用历史挂钩，这样你就可以做到这一点

import React from 'react';
import { IconContext } from "react-icons";
import { BsFileEarmarkArrowDown } from "react-icons/bs";
import { useHistory } from "react-router-dom";
import "./icon.css"

const Question = () => {

     let history = useHistory();

    return (
        <IconContext.Provider value={{ color: "Green", className: "Icon", size:"3em" }}>
           <BsFileEarmarkArrowDown />
           </IconContext.Provider>
    );
  };
  
   export default function Firms() {
     return (
     history.push("/upload");
         <Question />  
    );
   }

  export default Question

希望对你有帮助 谢谢