Réaction du routeur passer le paramètre au composant

Question

 const rootEl = document.getElementById('root');

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path="/">
                <MasterPage />
            </Route>
            <Route exact path="/details/:id" >
                <DetailsPage />
            </Route>
        </Switch>
    </BrowserRouter>,
    rootEl
);
 

J'essaie d'accéder à l' ID dans le composant DetailsPage mais il n'est pas accessible. j'ai essayé

 <DetailsPage foo={this.props}/>
 

passer des paramètres à la page de détails, mais en vain.

 export default class DetailsPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="page">
            <Header />
            <div id="mainContentContainer" >

            </div>
            </div>
    );
    }
}
 

Vous avez donc une idée de la manière de transmettre l'ID à la page de détails?

Answer 1

J'ai utilisé cela pour accéder à l'ID de mon composant:

 <Route path="/details/:id" component={DetailsPage}/>
 

Et dans la composante de détail:

 export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
      </div>
    )
  }
}
 

Cela rendra n'importe quel identifiant dans un h2, espérons que cela aidera quelqu'un.

Answer 2

Si vous souhaitez transmettre des accessoires à un composant dans un itinéraire, la méthode la plus simple consiste à utiliser les paramètres render , comme suit:

 <Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />
 

Vous pouvez accéder aux accessoires à l'intérieur du DetailPage utilisant:

 this.props.match
this.props.globalStore
 

Les {...props} sont nécessaires pour transmettre les accessoires de la Route originale, sinon vous n'obtiendrez que this.props.globalStore à l'intérieur des DetailPage .

Answer 3

Utilisez la méthode de rendu:

 <Route exact path="/details/:id" render={(props)=>{
    <DetailsPage id={props.match.params.id}/>
}} />
 

Et vous devriez pouvoir accéder à l'id en utilisant:

 this.props.id
 

Dans le composant DetailsPage

Answer 4

Utilisez le composant:

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

Et vous devriez pouvoir accéder au id utilisant:

 this.props.match.params.id
 

À l'intérieur de la composante DetailsPage

Answer 5

Une autre solution consiste à utiliser un des crochets de l' Etat et du cycle de vie du composant mis en déroute et une déclaration de recherche dans le to propriété de l' <Link /> composants. Les paramètres de recherche sont accessibles ultérieurement via new URLSearchParams() ;

 <Link 
  key={id} 
  to={{
    pathname: this.props.match.url + '/' + foo,
    search: '?foo=' + foo
  }} />

<Route path="/details/:foo" component={DetailsPage}/>

export default class DetailsPage extends Component {

    state = {
        foo: ''
    }

    componentDidMount () {
        this.parseQueryParams();
    }

    componentDidUpdate() {
        this.parseQueryParams();
    }

    parseQueryParams () {
        const query = new URLSearchParams(this.props.location.search);
        for (let param of query.entries()) {
            if (this.state.foo!== param[1]) {
                this.setState({foo: param[1]});
            }
        }
    }

      render() {
        return(
          <div>
            <h2>{this.state.foo}</h2>
          </div>
        )
      }
    }