Requisiten an Komponente in React Router 4 übergeben

Question

Ich bin neu zu reagieren-Router und ich habe gerade angefangen, eine Anwendung mit react-Router V4 zu schreiben. Ich würde gerne Requisiten an Komponenten weitergeben, die von <Match /> gerendert wurden, und ich frage mich, was der "beste" oder "richtige" Weg ist, dies zu tun.

Ist es so etwas zu tun?

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

Ist das (Requisiten Komponenten vorbei <Match /> gerendert werden) auch eine gute Praxis zu tun mit reagieren-Router oder ist es ein Antipattern oder etwas; und wenn ja, warum?

Answer 1

Ich mache es wie folgt, um die Klarheit zu verbessern.

const myComponent = <MyComponent myProp={myProp} {...defaultProps} /> 


<Match pattern="/" component={myComponent} /> 

Durch diese Ihre router Code wird nicht durcheinander bekommen !.

Answer 2

Ich benutze render in Kombination mit einem definierten Verfahren wie folgt:

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

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

Answer 3

Die render prop ist für das Schreiben von Inline-Matches gemeint, so dass Ihr Beispiel ist der ideale Weg, um zusätzliche Requisiten passieren.

Answer 4

render() { 
    return(
     <Router history={browserHistory}> 
     <div> 
      <Route path="/" render={() => <Header 
      title={"I am Title"} 
      status={"Here is my status"} 
      /> 
      }/> 
       <Route path="/audience" component={Audience}/> 
       <Route path="/speaker" component={Speaker}/> 
     </div> 
     </Router> 
    ); 
} 

Answer 5

müssen Sie verwenden die render prop statt component auf benutzerdefinierten Requisiten passieren, sonst nur default Route props weitergegeben werden ({match, location, history}).

Ich gebe meine Requisiten an den Router und Kind-Komponenten wie so.

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> 

Answer 6

Ich bin ziemlich neu zu reagieren-Router und stieß auf ein ähnliches Problem. Ich habe einen Wrapper basierend auf der Documentation erstellt und das scheint zu funktionieren.

// 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} /> 

So weit so gut