我怎样才能确保当我点击一个图标时，另一个页面出现 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 = () => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <IconContext.Provider value={{ color: "Green", className: "Icon", size:"3em" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<BsFileEarmarkArrowDown />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</IconContext.Provider>&nbsp; &nbsp; );&nbsp; };&nbsp;&nbsp;&nbsp; &nbsp;export default function Firms() {&nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Uploads/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Question />&nbsp;&nbsp;&nbsp; &nbsp; );&nbsp; &nbsp;}&nbsp; 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 = () => {&nbsp; &nbsp; &nbsp;let history = useHistory();&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <IconContext.Provider value={{ color: "Green", className: "Icon", size:"3em" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<BsFileEarmarkArrowDown />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</IconContext.Provider>&nbsp; &nbsp; );&nbsp; };&nbsp;&nbsp;&nbsp; &nbsp;export default function Firms() {&nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp;history.push("/upload");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Question />&nbsp;&nbsp;&nbsp; &nbsp; );&nbsp; &nbsp;}&nbsp; export default Question希望对你有帮助谢谢