0
96
ViewsVerifique si el parámetro de URL está en la lista de parámetros permitidos y enrute en consecuencia
En mi app.js , tengo una lista de Rutas: -
<Switch> <Route path='/:locale'> <Header /> <Container /> <Footer /> </Route> <Route path='/notfound' component={NotFound} /> <Redirect to='/notfound' /> </Switch> Tengo una URL como www.mydomainname.com/us. Quiero que la primera ruta represente los componentes solo cuando :locale coincida us o uk . Si :locale está vacío o no es igual a us o uk (como au ), entonces la página debe dirigirse a /notfound .
El problema al que me enfrento actualmente es que, si ingreso www.mydomainname.com/notfound o cualquier cosa al azar después de www.mydomainname.com/ , entonces se está ejecutando la primera ruta. Sé que puedo obtener :locale usando useParams() , pero ¿cómo lo verifico con una matriz de valores permitidos y redirijo a la página /notfound si la verificación falla?
2 answers
Answer question0
La ruta "/:locale" es una ruta general, por lo que coincidirá con cualquier "/cadena aleatoria". Introduzca un Body de componente que sea un renderizador específico de la configuración regional.
<Switch> <Route path='/notfound' component={NotFound} /> <Route path='/:locale'> <Body> <Header /> <Container /> <Footer /> <Body> </Route> <Redirect from='/' to='/notfound' exact /> </Switch>Y el componente Body manejará la redirección
const Body = (props) => { const { locale } = useParams() if (["us", "uk"].indexOf(locale) != -1) return(props.children) else return( <Redirect to="/notfound" /> ) }0
La propiedad de Route del componente de path react-router-dom@5 usa path-to-regexp debajo del capó, por lo que puede usar esto para hacer coincidir las rutas de manera más exacta. path="/:locale(us|uk)" solo coincidirá con las rutas "/us" y "/uk" .
Ejemplo:
<Switch> <Route path="/:locale(us|uk)"> <Header /> <Container /> <Footer /> </Route> <Route path="/notfound" component={NotFound} /> <Redirect to="/notfound" /> </Switch> 