Извлекайте реквизиты для маршрутов из компонентов в React. js

Question

В моем приложении React я использую компонент, чтобы обернуть требуемые маршруты аутентификации. Как объяснено в этом ответе, я присвоил userInfo в качестве user реквизита каждому ребенку следующим образом.

const RequireAuth = props => {

    const [userInfo,setUserInfo] = useState([])

    useEffect( () => {
            Axios.get('/users/me').then(res => {
                    setUserInfo(res.data)
                    console.log(userInfo)
            }).catch(e => {
                console.log(e)
            })
        }
    })

    const childrenWithProps = React.Children.map(props.children, child =>
        React.cloneElement(child, { user: userInfo })
      );

    return isAuth  ? (
            <div>
            {childrenWithProps}
        </div>
        ) : 
       (<ClipLoader
        size={120}
        color={"#123abc"}
        loading={loading}
      />
        )
};

export default withRouter(RequireAuth)

Я завершаю требуемые маршруты с RequireAuth как в App.js.

<RequireAuth>
    <Route exact path="/courses"  component={Courses}></Route>
        <Route exact path="/courses/:courseId" component={Course}></Route>
</RequireAuth>

Мой вопрос таков: как я могу получить доступ к user в Course компоненте?

Answer 1

Вы можете передать информацию о пользователе следующим образом:

<Route exact path="/courses/:courseId"
    render={() => <Course user={this.state.user} />}
/>