web-dev-qa-db-fra.com

Passer des accessoires personnalisés au composant routeur dans react-router v4

J'utilise React Router pour créer une application multi-pages. Mon composant principal est <App/> Et il rend tout le routage vers les composants enfants. J'essaie de passer accessoires via la route, et sur la base de certains recherche je l'ai fait, la façon la plus courante pour les composants enfants de puiser dans les accessoires transmis est via l'objet this.props.route dont ils héritent. Cependant, cette l'objet n'est pas défini pour moi. Sur ma fonction render() dans le composant enfant, je console.log(this.props) et je retourne un objet qui ressemble à ceci

{match: Object, location: Object, history: Object, staticContext: undefined}

Ne ressemble pas du tout aux accessoires auxquels je m'attendais. Voici mon code en détail.

Composant parent (j'essaie de transmettre le mot "salut" comme accessoire appelé "test" dans tous mes composants enfants):

import { BrowserRouter as Router, HashRouter, Route, Switch } from 'react-router-dom';
import Link from 'react-router';
import React from 'react';

import Home from './Home.jsx';
import Nav from './Nav.jsx';
import Progress from './Progress.jsx';
import Test from './Test.jsx';



export default class App extends React.Component {

  constructor() {
    super();

    this._fetchPuzzle = this._fetchPuzzle.bind(this);
  }

  render() {
    return (
      <Router>
        <div>
          <Nav />
          <Switch>
            <Route path="/" exact test="hi" component={Home} />
            <Route path="/progress" test="hi" component={Progress} />             
            <Route path="/test" test="hi" component={Test} />
            <Route render={() => <p>Page not found!</p>} />
          </Switch>
        </div>
      </Router>
    );
  }
}

Enfant:

import React from 'react';
const CodeMirror = require('react-codemirror');
import { Link } from 'react-router-dom';

require('codemirror/mode/javascript/javascript')

require('codemirror/mode/xml/xml');
require('codemirror/mode/markdown/markdown');

export default class Home extends React.Component {

  constructor(props) {
    super(props);

    console.log(props)

  }

  render() {
    const options = {
      lineNumbers: true,  
      theme: 'abcdef'    
      // mode: this.state.mode
    };
    console.log(this.props)

    return (
      <div>
        <h1>First page bro</h1>        
        <CodeMirror value='code lol' onChange={()=>'do something'} options={options} />
      </div>);
  }
}

Je suis assez nouveau pour React donc mes excuses si je manque quelque chose d'évident. Merci!

javascriptreactjsreact-routerreact-router-v4
15
Mark Romano

Vous pouvez passer des props au composant en utilisant le render prop au Route et en insérant ainsi la définition de votre composant. Selon le DOCS:

Cela permet un rendu et un habillage en ligne pratiques sans le remontage indésirable expliqué ci-dessus.Au lieu d'avoir un nouvel élément React créé pour vous à l'aide de l'accessoire component, vous pouvez passer une fonction à appeler lorsque location correspond. Le prop de rendu reçoit tous les mêmes accessoires de route que le prop de rendu de composant

Vous pouvez donc passer l'hélice à un composant comme

 <Route path="/" exact render={(props) => (<Home test="hi" {...props}/>)} />

et vous pouvez y accéder comme

this.props.test

dans votre composant Home

P.S. Assurez-vous également que vous passez {...props} pour que les accessoires de routeur par défaut comme location, history, match etc sont également transmis au composant Home sinon le seul accessoire qui lui est transmis est test.

27
Shubham Khatri