0

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

introducir la descripción de la imagen aquí

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.

se agrega prop exact

sin prop exact

1
  • Ambas rutas deben tener el prop exact en true para que funcione correctamente
    – Jorius
    Commented el 8 oct. 2020 a las 19:03

2 respuestas 2

1

Las dos rutas que tienes actualmente anidadas en el Switch, deben tener el prop exact para que funcionen como esperas:

<Switch>
    <Route exact path="/">
        <PersonsList list={lstPersons} />
    </Route>
    <Route exact path="/personInfo/">
        <PersonInfo data={dataPerson} />
   </Route>
</Switch>

La explicación a esto está en la documentación react-router-dom, pero básicamente se debe a que la ruta /personInfo está incluída dentro de la ruta previa /, entonces, al acceder mediante el navegador bien sea a / ó /personInfo el router realiza una búsqueda a través de todas las rutas y encuentra que ambos componentes coinciden con dicha ruta y por eso los muestra.

Siendo así,

path        | location.pathname | exact | matches
-------------------------------------------------
/           | /                 | true  | yes
/personInfo | /personInfo       | false | yes
3
  • Gracias por responder Jorius, pero agregue el pro exact y paso lo mismo, abajo voy a grgar un gif de la prueba si es que la plataforma me deja
    – drincast
    Commented el 8 oct. 2020 a las 20:01
  • toco editar la pregunta, jeje, aho subi el gif
    – drincast
    Commented el 8 oct. 2020 a las 20:09
  • Hola Jorius, tenia un problema en el código de PersonsList, una funcion ciclica, ya funciona bien, gracias
    – drincast
    Commented el 9 oct. 2020 a las 14:54
0

el error era mio, en el código de PersonsList, tengo una función recursiva que realiza un retorno del componente PersonInfo, lo que pasa es que estaba revisando la ejecución del ciclo final del componente por eso no había caído en-cuenta del error

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.