Как передать реквизиты из рендера реакции-роутера-doms? - PullRequest
Новая
       11

Как передать реквизиты из рендера реакции-роутера-doms?

0 голосов
/ 27 апреля 2020

Мне известно, что для передачи реквизита моим маршрутам мне нужно использовать рендер. Например: 

const BaseRouter = (props) => (

    <div>
        {console.log(props)} // this displays everything I need, including props.username
        <Route exact path='/room/' render={(props) => <Room {...props} />} />
    </div>
);

Проблема в том, что в моем компоненте Room единственные пропущенные реквизиты - это история, местоположение и совпадение (эти данные поступают прямо из response-router-dom).

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

<Route exact path='/room/' render={(props) => <Room {...props} username={props.username} />} />

Но внутри комнаты я все еще получаю неопределенное имя для props.username. Есть идеи?

Ответы [ 2 ]

1 голос
/ 27 апреля 2020

Вам нужно дать другое имя переменным. Выполнение render={(props) => <Room {...props} /> всегда будет пропускать реквизиты маршрутизатора, поэтому props.username не определено. 

const BaseRouter = (props) => (

    <div>
        <Route exact path='/room/' render={(routeProps) => <Room {...routeProps} {...props} />} />
    </div>
);
0 голосов
/ 27 апреля 2020

Компонент маршрута также принимает детей. 

const BaseRouter = (props) => (

    <div>
        {console.log(props)} // this displays everything I need, including props.username
        <Route exact path='/room/'>
          <Room {...props}/>
        </Route>
    </div>
);

В компоненте Room вы можете использовать хуки useHistory, useLocation и useRouteMatch. Если Room является компонентом, основанным на классе, тогда также полезно использовать withRouter HO C.

...