2
votes

Comment obtenir les paramètres d'URL dans reactjs

J'ai deux composants: App et Contact . Je veux juste imprimer l'id sur la page de contacts que je passe dans l'itinéraire, mais quand je console.log (this.props) dans mon composant de contact, il montre un objet vide.

import React from "react";

class Contact extends React.Component {
  render() {
    {console.log(this.props);}
    return <div>contact page</div>;
  }
}

export default Contact;

import React from "react";
import Contact from "./Contact";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <Router>
        <ul>
          <li>
            <Link exact to="/">
              Home
            </Link>
          </li>
          <li>
            <Link to={"/contact/id=" + 5}>contact us</Link>
          </li>
        </ul>

        <Route exact path="/">
          Home
        </Route>

        <Route path="/contact">
          <Contact />
        </Route>
      </Router>
    );
  }
}

export default App;

comment console.log(this.props.match)?

javascript reactjs react-router-dom

0 commentaires

3 Réponses :

1
votes

Vous déclarez vos paramètres de manière incorrecte

const Foo = ({ match }) =>{
    const = { params:{bar} } = match

    console.log(bar)
}

Et à l'intérieur de Foo

<Route path='/foo/:bar' component={Foo} />

Si vous accédez comme / foo / content bar affirmera à content

0 commentaires

2
votes

Vous pouvez le transmettre au composant Contact comme ceci:

let id = (new URL(window.location.href)).searchParams.get('id');

et à l'intérieur de votre composant Contact :

Si vous utilisez des classes

function Contact({id, ...props}){
// id === 5
}

Si vous utilisez des fonctions

this.props.id

Il est à noter qu'il s'agit toujours de javascript et que vous pouvez obtenir les paramètres d'URL de la même manière que vous le feriez dans vanilla JS comme ceci: (si vous le souhaitez, bien que ce ne soit pas conseillé): p >

<Route path="/contact">
    <Contact id={5}/>
</Route>

J'espère que cela vous aidera,

0 commentaires

0
votes

Je l'ai compris. J'ai enveloppé mon HOC avec withRouter () et le problème est résolu :)

0 commentaires