Estoy buscando renderizar condicionalmente un componente basado en la ruta (usando React Router), y el componente debería devolver null si coincide con cualquier ruta predefinida en una matriz o algún tipo de estructura de datos similar, donde lo hago no tiene que depender de una configuración de <Switch>/<Route>. Actualmente, esto es lo que tengo, pero es claramente ineficiente y nada robusto.

const Component = (props) => {
    const path = props.location.pathname;

    const paths_to_hide = ["/path/to/something", "/path/to/A", "/path/to/B"];
    if (paths_to_hide.indexOf(path) != -1) return null;
    
    return (
        <div>test</div>
    );
}

Por ejemplo, si quiero hacer coincidir las siguientes rutas:

  1. /path/to/something
  2. /path/to/something/<any path that follows after this>
  3. /path/<random string>/fixed
  4. /newPath/<random string>

Tenga en cuenta que esta lista no se limita solo a 4 elementos, por lo que estoy tratando de alejarme de la coincidencia de <Route> en línea, ya que estoy buscando un enfoque más escalable que pueda guardar en un archivo de configuración y se han importado como una matriz o alguna estructura de datos similar.

Actualmente, mi implementación solo podrá identificar el primer elemento, y no hay forma de hacer coincidir los elementos siguientes mediante la función indexOf(). ¿Cuál sería la mejor manera de lograr esto? ¡Cualquier ayuda se agradece, gracias!

0
Ajay Pillay 22 ene. 2021 a las 01:22

1 respuesta

La mejor respuesta

Entonces, después de leer más los documentos de React Router, encontré esto. Esta es definitivamente la solución más ideal y la pasé por alto inicialmente.

const Component = (props) => {
    const path = props.location.pathname;

    const paths_to_hide = ["/path/to/something", "/path/to/A", "/path/to/B"];
    return (
        <Switch>
            <Route path={paths_to_hide}>
            </Route>
            <Route>
                <div>test</div>
            </Route>
        </Switch>
    );
}

Entonces ahora puedo crear rutas complejas y no tengo que recorrer una matriz para que coincida, ya que se encarga del componente Route, y esto es ideal porque ahora puedo importar esta matriz desde un archivo de configuración en lugar de.

0
Ajay Pillay 23 ene. 2021 a las 09:54