//this route is define in app.js
<Route path="/edit" component={Edit}/>
//this is navlink
<NavLink to={{pathname:"/edit",state:{index:index}}}>Edit</NavLink>
// class
class Edit extends Component {
constructor(props){
super(props)
this.state = {
index:props.location.state.index,
title:'',
};
}
componentDidMount(){
axios.get("http://localhost:5000/gettitle",{headers: {token: Cookies.get('adtoken')}})
.then(response => {
this.setState({
title:response.data.jobs[this.state.index].title,
})
})
.catch(error => {
console.log(error)
})
}
render() {
}
}
export default Edit;
When I click on this Navlink it moves to /edit with props, but when I directly write /edit through URL it gives errors because it is accessing /edit component without propsHow can I protect /edit so that it cant be accessed directly through URL?
Thanks
3 Réponses :
Vous pouvez utiliser ici un exemple privatère composant:
J'ai essayé cela, apps.index? La valeur de vérification est vraie ou non, mais la valeur de la vérification n'est pas définie ou non .... Si la valeur de l'index est 0, il va à rediriger la page
J'ai édité la réponse à l'utilisation de État pour vérifier, vérifier l'exemple à nouveau.
Comment avez-vous défini le constructeur et le composantDidMount sans classe, cela.index n'est pas accessible dans la route privée
Utilisez-vous crochets de réact ?
Donc, il vous suffit d'ajouter le code ci-dessus à votre composant de classe. Je viens de modifier la réponse pour expliquer comment utiliser privatère .
Devrais-je écrire une partie de la route privée en rendu?
Non, sauf la dernière ligne là-bas. Je vais éditer le code pour déterminer où devrait utiliser dans rendu .
Non, cela n'a pas de sens, comment la composante privateoute obtient ceci.state.index comme il n'est pas écrasé dans une classe
Parce que je n'ai pas votre classe, j'ai juste un navlink . Veuillez partager votre classe entière en question pour effectuer un exemple complet.
Laissez-nous Continuez cette discussion en chat .
Si vous utilisez React-Router-V3 ou moins, vous pouvez utiliser Route Onenter Callback
const checkIfValidUrl = (nextState, replace, cb) => {
// Your condition goes here.
}
Il semble que vous utilisiez réagissant le routeur , ainsi Ma réponse sera pour cette bibliothèque.
Pour protéger Le composant EditPage ressemblerait à ceci comme suit: P> / edit code>, vous pouvez déclencher import React from 'react'
import { Redirect } from 'react-router-dom'
const EditPage = ({ index }) => {
if(index){
return <Redirect to="/" />
} else {
return <div>my protected page</div>
}
}
export default EditPage
Et si l'indice n'est pas défini? Comment puis-je vous assurer qu'il va à rediriger une partie
Changer si (index) sur if (! index)