Comment masquer le composant de réaction lors des changements d'itinéraire ?
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/:id
chemin 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
?
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)
}