2
votes

Extraire les valeurs de l'url à l'aide de React

J'utilise React et j'ai besoin de diriger l'utilisateur vers une page de profil, c'est-à-dire mydomain.com/profile/myusername mais je ne sais pas comment extraire le "myusername" de l'URL? Un extrait de mon code se trouve ci-dessous, veuillez aider!

Merci beaucoup

Routage

import React, { Component } from 'react';

class Profile extends Component {

  componentDidMount() {
  }

  render() {

    return (
      <div>
        <h1>myusername</h1>
      </div>
    );
  }
}

export default Profile;

Mon hyperlien

<Link to={`profile/${obj.username}`}>{obj.username}</Link>

Ma page de profil

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route path="/" component={Main} exact />
                    <Route path="/profile" component={Profile} exact />
                </div>
            </BrowserRouter>
        );
    }
}

export default App;

reactjs

0 commentaires

3 Réponses :

4
votes

Vous devez déclarer votre itinéraire comme:

render() {
  return (
    <div>
      <h1>{ this.props.match.params.username }</h1>
    </div>
  );
}

Et puis dans votre composant vous pouvez accéder au nom d'utilisateur avec:

this.props.match.params.username

Comme ceci:

<Route path="/profile/:username" component={Profile} exact />

0 commentaires

0
votes

Vous pouvez définir la route comme suit:

const id = this.props.match.params.idj

Dans le composant:

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

0 commentaires

0
votes

Vous pouvez définir votre itinéraire comme suit,

this.props.match.params.username

Accédez ensuite au nom d'utilisateur dans votre composant,

<Route path="/profile/:username" component={Profile} exact />

0 commentaires