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;

根文件：
从“React”导入React；
导入“/App.css”；
从“/Pages/ProcurementAnalysis/ProcurementAnalysis”导入ProcurementAnalysis；
从“/Components/upload/icon”导入问题；
函数App（）{
返回(
);
}
导出默认应用程序；

---

图标文件：
从“React”导入React；
从“反应图标”导入{IconContext}；
从“反应图标/B”导入{BSFileArmarkArrowDown}；
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
导入“/icon.css”
常量问题=（）=>{
返回(
);
};
导出默认函数（）{
返回(
,
);
}

---

上传文件
从“React”导入React；
类上载扩展了React.Component{
render（）{
返回上传；
}
}
导出默认上载

图标文件：
从“React”导入React；
从“反应图标”导入{IconContext}；
从“反应图标/B”导入{BSFileArmarkArrowDown}；
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
导入“/icon.css”
从“./Upload”导入上载
常量问题=（）=>{
返回(
);
};
导出默认函数（）{
返回(
{
返回；
}}
/>
,
);
}

我发现上传文件与此文件一样位于sime文件路径中

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

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 />
           );
           }