1
votes

Comment définir React.useState en fonction de l'URL

J'essaie de définir ce qui suit avec des nombres différents en fonction de la page sur laquelle l'utilisateur se trouve en utilisant window.location.path

<Route path="/podcast/:id" pageID="4" component={Podcast} />

J'ai essayé si la déclaration et il semble que je reçoive des erreurs. ma pensée était de définir un paramètre sur

cependant, bien que je sache, je pourrais faites quelque chose comme

const [value, setValue] = React.useState({pageID});

le problème est le suivant, comme vous pouvez le voir ci-dessous, j'ai un certain nombre de chemins définis, les onglets de la barre de navigation sont liés au chemin principal (/ , / about, / news, / programmes etc)

<Switch>
           <Route exact path="/" component={Home} />
           <Route path="/about/" component={About} />
           <Route path="/news/:id" component={News} />
           <Route path="/programs/:id" component={Programs} />
           <Route path="/podcast/:id" component={Podcast} />


</Switch>

Je veux pouvoir envoyer un numéro avec chaque Route afin que je puisse simplement définir ce qui suit avec quelque chose comme

<Route exact path="/:id" component={Home} />

Je pensais à quelque chose comme

const [value, setValue] = React.useState(1);

Comment puis-je faire cela?

reactjs react-router

0 commentaires

3 Réponses :

0
votes

disons que vous l'utilisez dans le composant News

La première étape pour pouvoir extraire le paramètre du lien consiste à utiliser withRouter p >

Importez-le dans le fichier News de votre composant: import {withRouter} depuis "react-router";
Nous devons envelopper le composant dans le HOC withRouter comme suit:

//instead of exporting it as export default News.
export default withRouter(News) //this will make the API we need available at the component's props

en supposant que vous vouliez faire cela:

const [value, setValue] = React.useState ({pageID});

au niveau du montage du composant, à l'intérieur de componentDidMount code > nous pouvons extraire le paramètre comme suit:

const {id} = this.props.match.params // l'id vers lequel l'utilisateur a navigué: / news /: id

et vous pourrez ensuite utiliser l'identifiant pour mettre à jour votre état.

0 commentaires

0
votes

Vous pouvez essayer de transmettre des paramètres au composant avec la méthode de rendu.

<Switch>
  <Route exact path="/" render={(props) => <Home pageId=1 {...props} />} />
  <Route path="/about/" render={(props) => <About pageId=2 {...props} />}  />
</Switch>

0 commentaires

0
votes

Vous pouvez ajouter plusieurs paramètres au chemin comme -

this.props.match.params.pageId

Et pour récupérer -

path="/podcast/:id/:pageId"

0 commentaires