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

Question

我需要一些帮助。我有一个图标，我希望当我按下该图标时可以转到其他页面，但我收到此错误 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

Answer 1

您只能在树组件<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>

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>

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 去上传，你可以使用 Use History hooks 这样你就可以做到这一点

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

希望对你有帮助谢谢