Réagir Routeur Passer Param de Composant

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

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

Je suis en train d'essayer d'accéder à la id dans le DetailsPage composant, mais il n'est pas accessible. J'ai essayé

<DetailsPage foo={this.props}/>

pour passer des paramètres à la DetailsPage, mais en vain.

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

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

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

Donc aucune idée de la façon de transmettre l'ID sur le DetailsPage ?

InformationsquelleAutor Mudit Tuli | 2017-08-26

react-router reactjs

65

Si vous souhaitez passer des accessoires à un composant à l'intérieur d'un itinéraire, le plus simple est d'utiliser le render, comme ceci:
```
<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />
```
Vous pouvez accéder à la des accessoires à l'intérieur de la DetailPage à l'aide de:
```
this.props.match
this.props.globalStore
```
La {...props} est nécessaire pour passer l'origine de l'Itinéraire accessoires, sinon vous n'obtiendrez this.props.globalStore à l'intérieur de la DetailPage.
- Mais pourquoi ne serait-il pas fonctionner de la même manière que j'ai précisé dans la demande ?
- Tout d'abord, votre code était faux. Insertion d'un composant à l'intérieur d'une Route comme <Route exact path="/details/:id" ><DetailsPage /></Route> n'était pas le même que <Route exact path="/details/:id" component={DetailsPage} />. Votre code rendus DetailsPage même si vous avez visité le '/'. Deuxièmement, quand vous avez écrit <DetailsPage foo={this.props}/>, this visée à null. C'est pourquoi il n'a pas de travail.
- Cela donne une erreur Warning: [react-router] You cannot change <Router routes>; it will be ignored
- Veuillez ouvrir une nouvelle question et de partager votre code.
InformationsquelleAutor Win
54

J'ai utilisé pour accéder à l'ID dans mon composant:
```
<Route path="/details/:id" component={DetailsPage}/>
```
Et dans le détail de la composante:
```
export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
      </div>
    )
  }
}
```
Cela va rendre toute pièce d'identité à l'intérieur d'un h2, l'espoir qui aide quelqu'un.
- fantastique!!!! Il me manquait le ".params" partie! merci!
- Ce doit être la accepté de répondre, c'est plus propre et plus simple.
InformationsquelleAutor Alexander Luna
16

Utiliser la méthode de rendu:
```
<Route exact path="/details/:id" render={(props)=>{
    <DetailsPage id={props.match.params.id}/>
}} />
```
Et vous devriez être en mesure d'accéder à l'id à l'aide de:
```
this.props.id
```
À l'intérieur de la DetailsPage composant
- cette btw travaille également avec la méthode des composantes: <Route path="/..." component={props => <DetailsPage id={props.match.params.id}/>}/>
InformationsquelleAutor Steven Daniel Anderson
6

Utiliser le composant:
```
<Route exact path="/details/:id" component={DetailsPage} />
```
Et vous devriez être en mesure d'accéder à la id à l'aide de:
```
this.props.match.params.id
```
À l'intérieur de la DetailsPage composant
- Intéressant cela fonctionne. Cependant, pourquoi il s'était séparé parce que je voulais passer une variable vers le bas pour le composant. <Route exact path="/details/:id" > <DetailsPage globalStore={globalStore} /> </Route> En train de passer le globalStore ne fonctionne pas.
- Je suis en train de faire exactement la même chose, mais j'obtiens une erreur. Donc, j'ai créé une nouvelle question. lien: stackoverflow.com/questions/52652521/... je suis en train d'essayer d'accéder à l'id de la console aussi simple que cela.
- Au lieu de "composant" sur la Route "si vous utilisez un "rendu", il donnera de bonnes performances
InformationsquelleAutor Dekel

En plus de Alexander Lunas réponse ...
Si vous souhaitez ajouter plus d'un argument suffit d'utiliser:

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

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

InformationsquelleAutor Manuel

Une autre solution est d'utiliser un état et le cycle de vie des crochets dans le acheminé composant et une instruction de recherche dans le to propriété de la <Link /> composant. Les paramètres de recherche peut ensuite être consulté 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>
        )
      }
    }

InformationsquelleAutor Manuel

Voici tapuscrit version. fonctionne sur "react-router-dom": "^4.3.1"

export const AppRouter: React.StatelessComponent = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/problem/:problemId" render={props => <ProblemPage {...props.match.params} />} />
                <Route path="/" exact component={App} />
            </Switch>
        </BrowserRouter>
    );
};

et composant

export class ProblemPage extends React.Component<ProblemRouteTokens> {

    public render(): JSX.Element {
        return (<div>{this.props.problemId}</div>);
    }
}

où ProblemRouteTokens

à l'exportation de l'interface ProblemRouteTokens {
problemId: string; }

merci c'est beaucoup mieux et plus simple fonctionne très bien
Je peux confirmer qu'il fonctionne également en v5.1.2 pour la classe de composant

InformationsquelleAutor GSerjo

Depuis réagir-routeur v5.1 avec des crochets:

import { useParams } from 'react-router';

export default function DetailsPage() {
  const { id } = useParams();
}

Voir https://reacttraining.com/blog/react-router-v5-1/

InformationsquelleAutor user1338062

0

si vous utilisez la classe de composant, vous êtes plus susceptibles d'utiliser GSerjo suggestion. Passer dans les params par <Route> accessoires pour votre composant cible:
```
exact path="/problem/:problemId" render={props => <ProblemPage {...props.match.params} />}
```
InformationsquelleAutor Matteus Barbosa

Vous devez vous connecter pour publier un commentaire.