Comment masquer le composant de réaction lors des changements d'itinéraire ?


Maxime Guillaume

J'utilise la propriété de localisation de react router dom pour définir l'état sur false et rendre le composant uniquement Si c'est vrai comme ceci dans react :

const [ showFilter, setShowFilter ] = useState(false);
const location = useHistory().location;

useEffect(() => {
            switch (location.pathname) {
                case '/signup':
                    return setShowFilter(false);
                case '/add/:id':
                    console.log(location);
                    return setShowFilter(false);
                default:
                    return setShowFilter(true);
            }
        },
        [ location ]
    );

   <Route exact path="/signup" component={SignUp} />
   <Route exact path="/add/:id" component={AddPage} />
{showFilter ? <FilterComp class="mr-2" location={location} /> : null}

Ainsi, chaque fois que l'emplacement change, useEffect s'exécutera et si l'emplacement est égal à l'un des cas de commutation, il définiraState sur false et le composant FilterComp sera masqué.

Le problème est que le /add/:idchemin d'accès à l'emplacement de la route ressemblera à ceci :

/add/2

et l'utilisation de '/add/:id' dans l'instruction switch ne fonctionne pas, je dois donc connaître tous les :id et les inclure tous dans l'instruction switch, ce qui est impossible.

Je ne peux pas trouver un moyen d'inclure cette logique dans l'instruction switch comme les autres routes.

Comment puis-je correctement définir l'état sur false lorsque la prop de localisation a des paramètres comme celui-ci /add/:something?

Dima G

Au lieu de switch, vous pouvez utiliser if.

if (location.pathname.startsWith('/add/')) {
    setShowFilter(false)
} else if (location.pathname.startsWith('/signup')) {
    setShowFilter(false)
} else {
    setShowFilter(true)
}

Articles connexes