React Router如何仅渲染对应路由组件、不展示其他额外组件？

问题根因 #

你当前代码将FormTareas和BasicTable放在路由匹配逻辑<Switch>外，因此不受路由规则限制，所有路径下都会渲染，这是/Modificar路由下仍能看到这两个组件的原因。

解决方法 #

将两个公共组件放到默认路由的匹配规则内即可，同时注意React Router v5版本下，给路由组件传递自定义参数时不要使用component属性，改用render属性避免函数上下文丢失，修改后的代码如下：

<BrowserRouter>
  <Switch>
    {/* /Modificar路由仅渲染Modificar组件 */}
    <Route
      exact
      path="/Modificar"
      render={() => (
        <Modificar
          tareaACambiar={tareaACambiar}
          actualizar={actualizar}
        />
      )}
    />
    {/* 根路由渲染表单和列表组件 */}
    <Route
      exact
      path="/"
      render={() => (
        <>
          <FormTareas
            handleChange={handleChange}
            handleSubmit={handleSubmit}
            validateForm={validateForm}
          />
          <BasicTable
            tareas={tareas}
            eliminarTarea={eliminarTarea}
            modificarTarea={modificarTarea}
          />
        </>
      )}
    />
  </Switch>
</BrowserRouter>

补充说明 #

之前你将组件放入路由后函数失效，是因为component属性每次匹配路由时都会新建组件实例，会清空原有作用域下的函数引用，render属性会复用当前父组件的作用域，所有传递的函数和状态都能正常生效。

内容的提问来源于stack exchange，提问作者JavierLoera