estoy implementando react-route en una aplicación de prueba, y tengo dos componentes que los configuro como rutas y en la vista inicial se estan visualizando los dos al tiempo, no se si tengo configurado mal el react-route, pero la idea es que se vea un solo componente, el que tiene la propiedad exact solamente al cargar la pagina, voy a dejar el código y imágenes
index.js
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>,
document.getElementById('root')
);
app.js
import {
Link,
Switch,
Route
} from 'react-router-dom'
import Head from './components/head';
import PersonsList from './components/personslist';
import PersonInfo from './components/personInfo';
function App(props) {
.
.
.
return (
<Fragment>
<Head props={props} setStates={{
setNameFilter,
setLstPersons
}} />
<Switch>
<Route exact path="/">
<PersonsList list={lstPersons} />
</Route>
<Route path="/personInfo/">
<PersonInfo data={dataPerson} />
</Route>
</Switch>
</Fragment>
);
}
imagen
No estoy usando el componente Link de react-route, ya que la idea es que en el componente PersonsList esta el componente Link por cada uno de los items que esta en a lista, al dar clic en uno de ello debería cargar el componente PersonInfo (esta acción la realiza bien), el inconveniente como menciono es en la carga inicial ya que se visualizan los dos componentes al tiempo
Gracias.
exact
entrue
para que funcione correctamente