时间戳

首页 > 解决方案 > 我怎样才能确保当我按下一个图标时，另一个页面会出现在 Reactjs 中

javascript - 我怎样才能确保当我按下一个图标时，另一个页面会出现在 Reactjs 中

问题描述

我有 3 个文件：一个根文件、一个图标文件（组件）和一个上传文件（组件）

我想确保按下图标时会出现上传屏幕。

我在图标文件中添加了路由器功能，以便连接到上传文件。

只有当我按下它时，什么都没有发生。

我怎样才能解决这个问题 ？

The Root file:

  import React from 'react';
    import './App.css';
    import ProcurementAnalysis from "./Pages/ProcurementAnalysis/ProcurementAnalysis";
    import  Question from "./Components/upload/icon";

function App() {
    return (
        <React.Fragment>
            <ProcurementAnalysis />
            <Question />
        </React.Fragment>
    );
}
export default App;

The Icon file:
    import React from 'react';
        import { IconContext } from "react-icons";
        import { BsFileEarmarkArrowDown } from "react-icons/bs";
        import {
          BrowserRouter as Router,
          Switch,
          Route,
          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 (
          <Router>
            <Link to="/"><Question /></Link>
            <Switch>
            <Route exact path="./Upload.js">
              <Question />
            </Route>
            </Switch>
          </Router>,
          <Question />
           );
           }

The upload file
import React from 'react';
class Upload extends React.Component {
  render() {
    return <h1>Upload</h1>;
  }
}
  export default Upload

标签： javascriptreactjsreact-router

解决方案

The Icon file:
    import React from 'react';
        import { IconContext } from "react-icons";
        import { BsFileEarmarkArrowDown } from "react-icons/bs";
        import {
          BrowserRouter as Router,
          Switch,
          Route,
          Link
        } from "react-router-dom";
        import "./icon.css"
        import Upload from './upload'


        const Question = () => {
            return (
                <IconContext.Provider value={{ color: "Green", className: "Icon",               size:"3em" }}>
                   <BsFileEarmarkArrowDown />
                   </IconContext.Provider>
            );
          };
         export default function Firms() {
           return (
          <Router>
            <Link to="/"><Question /></Link>
            <Switch>
            <Route
          path='/upload'
          render={() => {
            return <Upload />;
          }}
        />
            </Switch>
          </Router>,
          <Question />
           );
           }

我猜上传与此文件位于同一文件路径中

推荐阅读