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

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. Любые идеи?

0
Michael Skarn 27 Апр 2020 в 19:38

2 ответа

Лучший ответ

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

const BaseRouter = (props) => (

    <div>
        <Route exact path='/room/' render={(routeProps) => <Room {...routeProps} {...props} />} />
    </div>
);
1
Jagrati 27 Апр 2020 в 16:40

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

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 HOC.

0
gautamits 27 Апр 2020 в 16:45