Блог

У меня есть 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
  

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

я понимаю, что загрузка находится в том же пути к файлу, что и этот файл