react router我怎么能只渲染他路由中的组件而不渲染其他的呢?

Question

如何在/Modificar中只显示Modificar组分，而在

中同时显示BasicTable和FormTareas组分?

<BrowserRouter>
{
<Switch>
<Route
exact
path="/Modificar"
component={() => (
<Modificar
tareaACambiar={tareaACambiar}
actualizar={actualizar}
/>
)}
/>
</Switch>
}
<FormTareas
handleChange={handleChange}
handleSubmit={handleSubmit}
validateForm={validateForm}
></FormTareas>
<BasicTable
tareas={tareas}
eliminarTarea={eliminarTarea}
modificarTarea={modificarTarea}
></BasicTable>
</BrowserRouter>

是工作，但当我在/Modificar滚动其他两个组件也渲染。我试着把另一个开关和路由，但我通过的功能不起作用:(代码在这里https://github.com/JavierLoera/Lista-Tareas。预览在这里https://lista-tareas-gilt.vercel.app/

Answer 1

因为它们是在你的路由逻辑之后添加的，为了避免需要在另一个路由中添加它们

Answer 2

我想你需要这样的东西:

<BrowserRouter>
{
<Switch>
<Route exact path="/">
<FormTareas
handleChange={handleChange}
handleSubmit={handleSubmit}
validateForm={validateForm}
></FormTareas>
<BasicTable
tareas={tareas}
eliminarTarea={eliminarTarea}
modificarTarea={modificarTarea}
></BasicTable>
</Route>
<Route
exact
path="/Modificar"
component={() => (
<Modificar
tareaACambiar={tareaACambiar}
actualizar={actualizar}
/>
)}
/>
</Switch>
}
</BrowserRouter>

当你去"/"或"/Modificar"它只会显示那些在Route组件中的组件。