Передача реквизитов в компонент React Router 4

Я новичок в реакции маршрутизатора, и я только начал писать приложение с помощью реактивного маршрутизатора V4. Я хотел бы передать реквизиты компонентам, отображаемым <Match />, и мне интересно, что это лучший или правильный способ сделать это.

Это что-то вроде этого?

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

Это (передача реквизита компонентам, которые будут отображаться с помощью <Match />), даже хорошая практика сделать это с помощью agent-router или это антипаттерн или что-то еще; и если да, то почему?

Ответ 1

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>
    );
}

Ответ 2

Вы должны использовать render prop вместо component для передачи пользовательских реквизитов, в противном случае передаются только по умолчанию реквизиты маршрута ( {match, location, history}).

Я передаю свои реквизиты в Router и дочерние компоненты, как это.

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>

Ответ 3

Я сделаю это следующим образом, чтобы улучшить ясность.

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


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

Таким образом, ваш код router не будет запутан!!

Ответ 4

Я использую render в сочетании с определенным способом:

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

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

Ответ 5

render prop предназначен для написания встроенных совпадений, поэтому ваш пример - идеальный способ передачи дополнительных реквизитов.