web-dev-qa-db-fra.com

Passer des accessoires au composant dans React Router 4

Je suis nouveau sur react-router et je viens de commencer à écrire une application en utilisant react-router V4. Je voudrais passer des accessoires aux composants rendus par <Match /> et je me demande quelle est la "meilleure" ou "bonne" façon de le faire.

Est-ce en faisant quelque chose comme ça?

<Match pattern="/" render={
    (defaultProps) => <MyComponent myProp = {myProp} {...defaultProps} />
}/>

Est-ce (passer des accessoires aux composants à rendre par <Match />) même une bonne pratique pour le faire avec react-router ou est-ce un antipattern ou quelque chose; et si oui, pourquoi?

javascriptreactjsreact-router
21
Dimitris Karagiannis

Vous devez utiliser le render prop au lieu de component pour transmettre les accessoires personnalisés, sinon seuls les accessoires de route par défaut sont transmis ({match, location, history}).

Je passe mes accessoires au routeur et aux composants enfants comme ça.

class App extends Component {

  render() {
    const {another} = this.props
    return <Routes myVariable={2} myBool another={another}/>
  }
}

const Routes = (props) =>
  <Switch>
    <Route path="/public" render={ (routeProps) => 
      <Public routeProps={routeProps} {...props}/>
    }/>
    <Route path="/login" component={Login}/>
    <PrivateRoute path="/" render={ (routeProps) =>
       ...
    }/>
  </Switch>
11
Qwerty
render() {
  return (
    <Router history={browserHistory}>
      <Switch>
        <Route path="/" 
           render={ ()  => <Header 
             title={"I am Title"} 
             status={"Here is my status"}
           /> }
        />
        <Route path="/audience" component={Audience}/>
        <Route path="/speaker" component={Speaker}/>
      </Switch>
    </Router>
  )
}
5
im-sunil

Je suis assez nouveau sur react-router et suis tombé sur un problème similaire. J'ai créé un wrapper basé sur Documentation et cela semble fonctionner.

// Wrap Component Routes
function RouteWrapper(props) {
  const {component: Component, ...opts } = props

  return (
   <Route {...opts} render={props => (
     <Component {...props} {...opts}/>
   )}/>
 )
}

 <RouteWrapper path='/' exact loggedIn anotherValue='blah' component={MyComponent} />

Jusqu'ici tout va bien

1
falisse

L'option render est conçue pour écrire des correspondances en ligne, donc votre exemple est le moyen idéal pour passer des accessoires supplémentaires.

0
Paul S

J'utilise render en combinaison avec une méthode définie comme ceci:

class App extends React.Component {
  childRoute (ChildComponent, match) {
    return <ChildComponent {...this.props} {...match} />
  }

  render () {
    <Match pattern='/' render={this.childRoute.bind(this, MyComponent)} />
  }
}
0
Marc Greenstock