reactjs-为使用路由的react应用程序添加过滤脚本？

我正在开发一个使用路由的react应用程序。更好地处理一个“问题”；第“页”；，我使用一个代码游乐场来处理代码，并将其实现到最终的react应用程序中。然而，使用路由会使事情变得复杂，我想知道如何实现我知道有效的脚本。在单页react应用程序中，我的索引。js（最后一个代码段）检查一个页面的html中的元素（第一个代码段中的2个div），并根据条件呈现组件（第二个代码段）。在我的最后一个react应用程序中，有多个这样的页面，我不确定在哪里或如何包含脚本，因为它使用的html文档本身就是一个组件（第一个片段）。

//This div is the component that, on click, applies a component to be returned via jsx function. This is a component called ExercisesLauncher.jsx

            <div id="Gym/Home/Upper/Lower/Cardio" class="col-lg-4 d-flex align-items-stretch">
              <div
                style={cursorPointer}
                class="card w-100 mb-4 rounded-3 shadow-sm filter"
              >
                <div class="card-heading py-1">
                  <h1 class="normal-heading">Gym/Home/Upper/Lower/Cardio</h1>
                </div>
                <div class="card-body">
                  <p>You have equipment that is found at an ordinary gym.</p>
                </div>
              </div>
            </div>


//This div is created later in the same file, loading UpperLevel component, root was originally used in the html file (single page) to load components seen later in the question.
          <div id="root" class="container">
            <UpperLevel />
          </div>

//This is the component that is to be loaded, and included are the other components I wish to swap out depending on if a div is clicked. UpperLevel is used in the ExercisesLauncher component
import React from "react";
import Grid from "./Grid";
import GridCardio from "./GridCardio";
import GridGym from "./GridGym";
import GridHome from "./GridHome";
import GridUpper from "./GridUpper";
import GridLower from "./GridLower";

function UpperLevel() {
  return (

  );
}

export default UpperLevel;

//This code was used for the single page not using routes, in the playground, the DOM references refer to the divs above, that are now in a .jsx file, not an HTML file
var gym = document.getElementById("Gym");
var home = document.getElementById("Home");
var upper = document.getElementById("Upper");
var lower = document.getElementById("Lower");
var cardio = document.getElementById("Cardio");

document.addEventListener("click", function (event) {
  if (gym.contains(event.target)) {
    ReactDOM.render(, document.getElementById("root"));
  } else if (home.contains(event.target)) {
    ReactDOM.render(, document.getElementById("root"));
  } else if (upper.contains(event.target)) {
    ReactDOM.render(, document.getElementById("root"));
  } else if (lower.contains(event.target)) {
    ReactDOM.render(, document.getElementById("root"));
  } else if (cardio.contains(event.target)) {
    ReactDOM.render(, document.getElementById("root"));
  } else {
    ReactDOM.render(, document.getElementById("root"));
  }
});

到目前为止，我试图将脚本粘贴到ExercisesLauncher组件中，并导入必要的组件，但相应的路径只加载了一个白色屏幕。